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内 容 提 要 
jQuery Mobile 是 一 套 基 于 jQuery 的 移动 应 用 界面 开发 框架 。 本 书 将 为 你 系统 讲述 使 用 该 框架 开发 Web 
移动 应 用 的 方法 ， 包 括 框架 构成 、 页 面 、 对 话 框 、 弹 出 页 面 、 触 控 交 互 、 按 钮 、 工 具 栏 、 列 表 视 图 、 表 单 ， 
以 及 页 面 响应 式 布局 设计 、 主 题 风 格 美化 、 事 件 响 应 与 其 他 一 些 高 级 而 实用 的 技巧 。 
本 书 既 适合 开发 人 员 、 测 试 人 员 和 产品 经 理 使 用 ， 也 适合 作为 大 中 专 院 校 相关 专业 师 生 的 学 习 用 书 与 
培训 教材 。 
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我 从 2011 年 开始 关注 jQuery Mobile， 当 时 它 还 是 1.0a2 版 本 ， 它 的 简单 、 高 效 和 质量 稳定 
很 快 就 吸引 了 我 。 在 学 习 jQuery Mobile 几 个 或 者 十 几 个 小 时 之 后 ， 一 名 Web 工程 师 就 能 够 快速 
开发 出 质量 稳定 而 有 趣 的 应 用 。 难 能 可 贯 的 是 ， 基 于 jQuery Mobile 所 开发 的 应 用 能 在 绝 大 多 数 
主流 移动 设备 上 顺畅 运行 。 对 于 快速 成 长 的 创业 公司 来 说 , 这 极 具 吸引 力 ， 因 为 开发 原生 移动 应 
用 ， 需 要 文 持 多 种 不 同 的 移动 设备 操作 系统 ， 这 会 给 任何 中 小 型 软件 创业 团队 讲 来 不 小 的 压力 。 
事实 上 ,jQuery Mobile 的 潜力 已 经 被 越 来 越 多 的 企业 和 组 织 所 认可 。 在 技术 社区 中 , 很 多 大 公司 
正在 支持 基于 jQuery Mobile 的 应 用 。 在 最 近 发 布 的 Visual Studio 2012 中 ，jQuery Mobile 被 作为 
一 种 内 置 的 应 用 解决 方案 包含 其 中 。 

坦率 地 说 ， 写 一 本 jQuery Mobile 的 书 令 我 兴奋 而 志 趟 。 面 对 移动 应 用 时 代 的 到 来 ， 新 技术 
呼唤 着 我 ， 我 兴奋 不 已 ， 虽 然 这 已 经 不 是 我 第 一 次 学 习 一 种 新 技术 。 我 的 程序 员 生 涯 是 从 20 世 
纪 90 年 代 在 Turbo C 下 开发 DOS 程序 开始 的 。 上 网 冲浪 也 是 从 象牙 塔 中 的 Telnet 和 Gopher 时 代 
进入 到 WWW 时 代 ， 再 到 今天 的 移动 时 代 。 在 过 去 的 十 几 年 中 ， 每 次 的 变化 都 是 一 次 赔 变 。 我 
很 庆 竺 能 目睹 这 些 年 来 所 发 生 的 令 人 司 叹 的 变化 。 志 下 之 中 , 希望 我 能 跟 上 技术 发 展 的 脉 捕 ， 也 
能 将 这 种 新 技术 说 清楚 ， 讲 明白 。 

本 书 的 主要 目标 读者 如 下 : 

口 Web 移动 应 用 开发 工程 师 ; 

口 移动 应 用 创业 者 ; 

口 有 兴趣 学 习 移 动 应 用 开发 的 学 生 和 工程 师 ; 

口 有 兴趣 研究 Web 移动 应 用 的 工程 师 。 

本 书 会 提供 常用 jQuery Mobile 开发 的 范例 程序 ， 并 结合 实际 应 用 场景 探讨 高 级 定制 化 的 主 
题 。 这 里 我 建议 读者 重点 阅读 基本 的 应 用 场景 ， 因 为 这 些 场 景 用 得 最 多 。 此 外 , 书 中 的 高 级 技巧 
在 实际 项 目 中 也 可 能 遇 到 ， 如果 需 要 ， 可 以 查找 书 中 相关 内 容 。 关 于 高 级 内 容 ， 读者 只 要 能 查 到 
并 会 使 用 就 够 了 。 

本 书 共 13 草 和 1 个 附录 ， 下 面 概要 介绍 各 草 的 内 容 。 

第 1 草 概 述 了 使 用 jQuery Mobile 开发 应 用 的 优势 和 劣势 ， 以 及 对 于 不 同 设 备 的 文 持 情况 。 

第 2 章 讲 述 了 jQuery Mobile 与 HTML5 之 间 的 联系 ， 介 绍 了 开发 一 个 基本 的 Hello World 程 
序 并 通过 Web 服务 硕 进 行 发 布 的 过 程 。 最 后 , 我 们 还 介绍 了 儿 种 常用 的 jQuery Mobile 开发 工具 。 

第 3 章 讲述 了 打开 和 关闭 应 用 的 页 面 和 对 话 框 , 以 及 在 不 同 页 面 和 对 话 框 之 间 进 行 切 换 的 方法 。 


第 4 章 讲述 了 页 面 的 高 级 话题 , 包括 通过 预 取 和 组 存 改善 页 面 访 问 速度 、 在 页 面 之 间 传 递 参 
数 、 个 性 化 定制 加 载 消 息 以 及 支持 HIMLS 的 离线 应 用 。 在 jQuery Mobile 中 ,默认 是 无 法 实现 合 
名 销 记 的 ， 这 里 我 们 将 讲述 实现 命名 销 记 的 方法 。 

第 $ 章 讲述 了 弹出 页 面 技术 ， 这 是 在 jQuery Mobile 1.2.0 之 后 引入 的 新 特性 。 这 里 将 讲述 基 
本 的 沫 单 、 表 单 和 对 话 框 的 弹出 页 面 ， 此 外 还 将 介绍 以 弹出 页 面 的 形式 呈现 视频 、 网 片 和 地 图 。 

第 6 草 讲 述 了 虚拟 鼠标 事件 和 触 控 交互 的 实现 方法 。 

第 7 章 讲 述 了 jQuery Mobile 中 的 按钮 。 在 jQuery Mobile 中 , 除了 表单 元 系 中 使 用 的 按钮 外 ， 
还 会 讲 一 些 将 超级 链接 美化 为 按钮 的 样式 ， 比 如 实现 页 面 切换 的 超级 链接 。 在 这 一 章 中 ,我们 还 
将 讲述 按钮 的 高 级 主题 ， 包 括 目 定义 按钮 图 片 以 及 按钮 中 的 文字 折 行 呈现 等 。 

第 8 章 讲 述 了 页 眉 、 页 脚 和 导航 工具 栏 ， 以 及 目 定 义 图 标的 导航 工具 栏 和 目 定 义 风 格 的 工 
具 栏 。 

第 9 草 讲 述 了 在 Web 移动 应 用 开发 中 十 几 种 常见 的 列表 视图 实现 方法 。 此 外 ， 这 一 草 还 介 
绍 了 一 些 列表 视图 的 触 控 操作 、 动 态 加 和 载 以 及 个 性 化 界面 设计 的 技巧 。 

第 10 半 讲述 了 常用 的 表单 和 表单 元 素 的 使 用 方法 ， 以 及 表单 验证 与 文件 上 传 的 实现 方法 。 

第 11 草 讲 述 了 页 面 布局 的 方法 。 基 于 这 些 内 容 , 开发 者 可 以 在 有 限 的 用 户 界面 中 有 效 地 组 织 
和 布局 界面 上 的 内 容 和 功能 。 

第 12 间 讲 述 了 基于 移动 设备 浏览 如实 现 啊 应 式 设计 的 方法 。 从 某 种 意义 上 说 ,第 12 章 是 第 
11 章 在 啊 应 陈设 计 上 的 延伸 , 这 里 将 重点 探讨 分 栏 技术 、 回 流 表 格 和 字段 切换 表格 的 啊 应 陈设 计 
以 及 滑动 面板 设计 。 

第 13 草 讲 述 了 对 Web 移动 应 用 界面 进行 主题 风格 美化 的 方法 ,包括 选择 和 设置 jQuery Mobile 
内 置 色 版 ， 以 及 通过 ThemeRoller 进行 风格 与 色 版 的 定制 化 。 最 后 ， 这 一 章 将 会 讲述 通过 程序 动 
态 调整 页 面 元 系 的 主题 设置 方法 。 

附录 讲述 了 进行 jQuery Mobile 开发 时 可 能 会 用 到 的 JavaScript 单元 测试 自动 化 技术 , 这 里 的 
单元 测试 目 劲 化 采用 QUnit 实现 ,熟悉 jQuery 的 开发 者 通 筑 很 快 就 能 掌握 这 种 测试 目 动 化 技术 。 

在 这 本 书写 作 之 初 ， 我 有 对 得 到 谢 子 斌 和 杨 海 玲 两 位 老师 的 指点 和 豆 励 。 在 写作 的 过 程 中 ， 
图 灵 教 育 的 王 军 花 老师 给 了 予 大 量 细 人 臻 和 耐心 的 指导 和 帮助 ,此 外 ,我 的 家 人 也 给 了 我 很 大 的 支持 ， 
使 我 每 天 都 能 安排 完整 的 时 间 来 学 习 和 写作 。 大 家 的 文 持 ， 是 对 我 莫大 的 避 励 和 鞭 宁 。 我 在 此 对 
大 家 表示 衷心 的 感谢 ! 

jQuery Mobile 是 一 个 发 展 非 常 迅 速 的 技术 , 我 希望 通过 一 些 知 识 与 经 验 的 分 享 , 能 为 jQuery 
Mobile 技术 社区 作出 一 些 贡 献 。 然 而 我 深 知 目 己 能 力 有 限 , 书 中 内 容 难 免 有 所 下 沽 。 如 果 你 在 阅 
读本 书 的 过 程 中 发 现 诬 误 或 不 足 ， 请 给 予 指正， 非常 感谢 ! 


陆 明 
2013 年 5 月 
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jQuery Mobile 概 壕 


jQuery Mobile 是 一 套 基 于 jQuery 的 移动 应 用 界面 开发 框架 ， 以 网 页 的 形式 呈现 类 似 于 移动 应 
用 的 界面 。 当 用 户 使 用 智能 手机 或 平板 电脑 ， 通 过 浏览 器 访问 基于 jQuery Mobile 开 发 的 移动 应 用 
网 站 时 ,将 获得 与 本 机 应 用 接近 的 用 户 体 验 。 用 户 不 需要 在 本 机 安装 额外 的 应 用 程序 ， 直 接 通 过 
浏览 大 就 可 以 打开 这 样 的 移动 应 用 。 

在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

D jQuery Mobile 的 基本 概念 ; 

口 应 用 jQuery Mobile 的 Web 站 点 ; 

D Web 移 动 应 用 和 本 机 应 用 的 差异 ， 以 及 Web 移 动 应 用 的 优势 ; 

D jQuery、jQuery Mobile 和 jQuery UI 之 间 的 关系 ; 

D jQuery Mobile 对 于 不 同 移动 设备 的 文 持 情况 ; 

口 其 他 流行 的 Web 移 动 应 用 开发 框 染 ; 

口 jQuery Mobile 许 可 协议 ; 

口 受 限 的 应 用 场景 。 

jQuery Mobile 是 基于 jQuery JavaScript 库 和 HTML5 发 展 而 成 的 移动 应 用 用 户 界面 系统 。 基 于 
jQuery Mobile 开 发 的 移动 应 用 ,体积 轻 量 ， 用 户 体验 与 界面 风格 统一 ， 并 碌 容 大 量 移动 平台 。 在 
前 奖 页 面 的 呈现 方面 , jQuery Mobile 实 现 了 界面 美化 和 对 移动 设备 浏览 絮 的 兼容 。 在 大 多 数 开发 
场景 下 , jQuery Mobile 应 用 开发 不 需要 过 多 关心 jQuery JavaScript 库 的 实现 方式 ,只 需要 在 页 面 中 
引用 合适 的 jQuery 版 本 就 可 以 了 。 

在 jQuery Mobile 出 现 之 前 ，jQuery 已 经 发 展 了 很 多 年 。jQuery 于 2006 年 发 布 了 第 一 个 版 本 ， 
现在 它 已 成 为 最 受 欢 迎 的 JavaScript 库 。 在 全 球 访问 量 最 高 的 10 万 个 网 站 中 , 使 用 jQuery 的 网 站 高 
200 

另 一 个 广泛 流行 的 jQuery JavaScript 用 户 开发 框架 是 jQuery UI。jQuery Mobile 与 jQuery UI 的 
定位 不 同 : 前 者 用 于 开发 移动 应 用 ,后 者 常用 于 开发 虹 面 Web 应 用 。 它 们 的 共同 之 处 在 于 它们 都 
是 基于 jQuery JavaScript 库 实现 的 用 户 界 面 系统 。 

简单 来 说 ，jQuery Mobile 应 用 就 是 一 个 web 移动 应 用 。 所 不 同 的 是 ，jQuery Mobile 应 用 为 移 
动 设备 在 网 络 传输 、 页 面 呈 现 、 用 户 行 为 交互 等 领域 进行 了 特别 的 优化 。 在 使 用 jQuery Mobile 
开发 的 移动 应 用 中 ,业务 逻辑 通 稼 主要 通过 Web 服 务 需 进行 处 理 ， 而 不 是 基于 移动 设备 浏览 锅 中 
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的 jQuery Mobile 页 面 来 实现 。 在 这 样 的 应 用 中 ，HTML 和 CSS 负 责 前 端 界 面 旦 现 ， 业 务 逻 辑 处 理 
交 予 后 台 的 Web 服 务 器 程序 ( 可 能 是 PHP、Python 、JSP 或 者 ASPNET 程 序 )。 这 些 语言 都 可 以 用 
来 开发 jQuery Mobile 的 服务 需 端 ， 这 与 其 他 网 站 开发 是 一 样 的 。 当 讨论 jQuery Mobile 的 时 候 ， 大 
多 数 情 况 下 是 关于 如 何 使 用 jQuery Mobile 开 发 适用 于 移动 应 用 环境 下 的 用 户 界面 。 

在 当前 的 开源 社区 中 ,很 多 开源 软件 开发 者 基于 jQuery Mobile 贡 献 了 许多 有 价值 的 插件 。 基 
于 这 些 插件 ， 移 动 应 用 开发 者 将 可 以 快速 、 低 成 本 而 高 质量 地 开发 适用 于 多 种 移动 设备 的 应 用 。 


1.1 Web 移动 应 用 还 是 本 机 应 用 


在 进行 移动 应 用 技术 方案 选 型 的 时 候 , 首先 要 选择 的 是 使 用 Web 移 动 应 用 还 是 使 用 本 机 应 用 
来 实现 开发 需求 。 两 种 方案 各 有 利弊 ， 适 用 场景 也 有 一 些 差异 。 

Web 移 动 应 用 的 优势 在 于 ， 通 过 标准 的 HTML5 语 言 以 及 浏览 器 支持 能 力 ， 可 以 低 成 本 地 开发 
兼容 性 良好 、 路 移动 平台 的 应 用 。 在 应 用 的 部 署 过 程 中 , 可 以 不 用 依赖 于 电子 市 场 或 其 他 渠道 商 进 
行 安装 包 版 本 检验 和 更 新 分 发 。 和 Web 网 站 一 样 ，Web 移 动 应 用 更 新 或 者 重新 部 署 到 Web 服 务 器 之 
后 ,用 户 使 用 手机 再 打开 这 个 网 站 ,手机 中 的 应 用 也 就 实现 了 同时 更 新 。Web 移 动 应 用 同样 可 以 基 
于 HTMLS 语 言 保存 一 定 的 用 户 本 地 数据 ， 这 样 可 以 改善 移动 应 用 的 运行 速度 。 此 外 ，Web 移 动 应 
用 不 需要 占用 移动 设备 有 限 的 存储 空间 。 对 于 地 理 位 置 定位 等 应 用 ， 很 多 移动 设备 浏览 器 在 支持 
HTML5 语 言 的 时 候 ， 也 提供 了 相应 的 支持 。 这 也 为 Web 移 动 应 用 支持 更 多 应 用 场景 提供 了 便利 。 

Web 移 动 应 用 在 开发 和 运 维 过 程 中 ,会 受到 一 定 限 制 。 假 如 移动 网 络 速度 比较 慢 或 网 络 连接 
不 够 稳定 ， 则 Web 移 动 应 用 的 用 户 打 开 应 用 页 面 的 速度 会 变 慢 ， 移 动 网 络 覆 盖 不 到 的 地 方 则 不 能 
打开 Web 移 动 应 用 界面 。 此 外 ， 运 行 Web 移 动 应 用 还 可 能 产生 网 络 流量 费用 。 由 于 Web 移 动 应 用 
通过 浏览 锅 呈 现 界面 并 与 用 户 交 互 , 所 以 如 果 所 应 用 的 场景 需要 开发 额外 的 手机 底层 应 用 , 例如 
某 种 特定 格式 的 视频 播放 需 ， 则 可 能 会 受到 限制 。 

传统 的 本 机 应 用 会 在 执行 效率 、 使 用 过 程 成 本 和 一 些 需 要 与 硬件 资源 交互 的 环境 下 表现 出 明 
显 的 优势 。 不足 之 处 在 于 ,安装 和 部 署 成 本 高 ， 推 广 会 受到 电子 市 场 排行 的 影响 、 移 动 设备 内 存 
空间 的 限制 ， 需 要 考虑 到 应 用 程序 与 移动 设备 的 兼容 性 等 。 

相 比 之 下 ，Web 移 动 应 用 可 以 胜任 大 多 数 移动 平台 开发 需求 ， 包 括 内 容 订阅 与 分 发 、 移 动 办 
公 、 远 程 览 控 、 电 子 游戏 和 娱乐 等 。 特 别 是 在 很 多 细 分 市 场 下 ，Web 移 动 应 用 将 非常 具有 优势， 
例如 移动 阅读 。 


1.2 ”移动 平台 兼容 性 


jQuery Mobile 可 以 支持 许多 平台 ,包括 台式 机 、 知 能手 机、 电子 阅读 右 和 平板 电脑 的 操作 系 
统 等 。 对 于 不 同 的 平台 ， 文 持 程度 有 所 区 别 ， 分 为 三 种 级 别 的 官方 文 持 ， 具 体 如 下 所 示 。 

口 A 级 : 全 部 用 户 体验 特效 ， 包 括 基 于 Ajax 的 页 面 动画 切换 效果 。 

口 B 级 : 部 分 用 户 体 验 特效 ,一些 Ajax 特 效 和 动画 切换 效果 呈现 将 会 受到 影响 。 
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口 C 级 : 基本 的 HITML 功 能 特性 ， 但 没有 增强 的 用 户 体验 特效 。 
当前 ， 大 部 分 主流 的 移动 应 用 平台 均 属 于 jQuery Mobile 的 A 级 范围 内 。 


注意 ”Web 移动 应 用 使 用 的 jQuery 库 版 本 可 能 影响 jQuery Mobile 的 兼容 性 级 别 。 例 如 ， 集 成 了 
jQuery 1.8.3 库 和 jQuery Mobile 1.3.1 的 Web 移 动 应 用 如 果 运 行 在 Blackberry 5.0 上 ， 则 只 能 
获得 C 级 呈现 效果 。 如 果 使 用 jQuery 1.7.2 库 ， 则 可 以 获得 B 级 的 呈现 效果 。 
当然 ， 在 大 多 数 设 备 中 ，jQuery Mobile 应 用 是 可 以 获得 A 级 呈现 效果 的 。 


各 种 操作 系统 对 jQuery Mobile 1.3.1 的 支持 情况 如 下 所 示 。 

口 A 级 : 
上 四 Apple 1OS 3.2 全 Apple iOS 6.1; 
上 四 Android 2.1 全 Android 2.3 ; 
四 Androld 3.2 ; 
@ Android 4.0 和 Android 4.1; 
@ Windows Phone 7.$ 全 Windows Phone 7.8; 
@ Blackberry 6 全 Blackberry 10; 
m Blackberry Playbook 1.0 人 至 Blackberry Playbook 2.0; 
上 Palm WebOS 1.4 全 Palm WebOS 3.0; 
mm Firebox Mobile 18; 
@ Chrome for Androld 18; 
四 Skyfire 4.1; 
四 Opbera Mobile 11.$ 全 Opera Mobile 12; 
@@ Meego ] .2 ; 
国 Zen ; 

m Kindle 3 和 Fire ; 

四 Nook Color 1.4.1; 

上 Chrome Desktop 16 全 Chrome Desktop 24:; 

四 Safari Desktop $ 全 Safari Desktop 6; 

四 Firefox Desktop 10 全 Firefox Desktop 18; 

m Internet Explorer 8 全 Internet Explorer 10; 

四 Opera Desktop 10 全 Opera Desktop 12 ; 

四 一 星 Bada 2.0; 

UC 训 览 融 。 

口 B 级 : 
四 Blackberry 5.0; 
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四 Opera MIlnl 7 ; 
@ Nokia Symblan ^ 人 3 ; 
四 Internet Explorer 7 ( 之 前 版 本 中 IE 7 是 A 级 文 持 )。 
口 C 级 : 
@ jiOS 3.x 或 更 早 版 本 ，; 
Blackberry 4.x; 
Windows Mobile; 
Internet Explorer 6 或 更 早 版 本 ; 
@ 其 他 更 时 版 本 的 智能 手机 操作 系统 。 
通过 官方 发 布 的 清单 可 以 发 现 , 当前 主流 的 移动 平台 ,包括 Apple iOS 3.2 及 其 后 续 版 本 、Android 
2.1 及 其 后 续 版 本 、Windows Phone 7.5 和 Blackberry 6 都 对 jQuery Mobile 具 有 良好 的 兼容 性 。 
对 于 很 多 中 文 界 面 的 Web 移 动 应 用 而 言 ， 建 议 还 是 尽 可 能 对 目标 人 群 的 主流 移动 平台 进行 界 
面 样式 和 布局 的 测试 ， 特 别 是 中 文字 符 集 、 字 体 、 字 号 以 及 排版 效果 。 


注意 ”对 于 不 同 版 本 的 jQuery Mobile， 其 平台 兼容 性 列表 也 会 存在 一 定 差异 。 开 发 者 在 选择 某 个 
jQuery Mobile 版 本 之 后 ， 建 议 先 检 查 移动 平台 与 目标 受众 的 移动 设备 是 否 能 够 良好 兼容 。 
例如 ， 在 早期 版 本 中 ，Windows Phone 7 是 A 级 支持 ， 而 在 jQuery Mobile 1.3.0 中 它 不 再 作为 A 
级 支持 ,在 jQuery Mobile 1.3.0 之 后 ,A 级 支持 范围 变 为 Windows Phone 7.5 至 Windows Phone 7.8。 
开发 者 需要 根据 应 用 场景 选择 合适 的 jQuery Mobile 版 本 ， 否 则 早期 的 移动 设备 可 能 不 能 
正常 运行 。 


1.3 为 何 选择 jQuery Mobile 


jQuery Mobile 很 有 可 能 成 为 未 来 路 平台 移动 应 用 的 主流 用 户 界 面 系统 之 一 。 与 其 他 路 平台 移 
动 应 用 相 比 ，jQuery Mobile 具 有 如 下 优势 : 

口 基于 jQuery JavaScript 框 架 ， 工 程 师资 源 和 技术 资源 最 为 丰富 ; 

口 框架 轻 量 ， 适合 移动 应 用 场景 ; 

口 良好 的 学 习 曲 线 和 开发 效率 ; 

口 兼容 所 有 主流 移动 设备 平 全; 

口 支持 HTML5 语 言 ; 

口 对 触 屏 和 女 标 事件 具有 良好 的 支持 ; 

口 面 癌 移 动 设备 的 性 能 优化 ; 

口 优化 的 移动 应 用 界面 风格 ; 

口 文 持 领域 广泛 ， 包 括 手机 、 平 板 电脑 和 电子 阅读 需 等 ; 

口 框架 开放 ， 并 人 允许 扩展 第 三 方 插件 ; 

口 开发 了 自 定 义 主题 、 色 版 和 字体 风格 的 界面 。 
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1.4 其 他 流行 的 Web 移动 应 用 开发 框架 


除了 jQuery Mobile 之 外 ， 还 有 其 他 一 些 基于 HTML 的 Web 移 动 应 用 框架 。 这 些 框架 也 已 经 独 
六 发 展 较 长 时 间 ， 并 成 功 应 用 在 一 些 项 目 中 。 在 这 里 我 们 将 会 简单 介绍 几 种 常见 的 移动 Web 应 用 
开发 技术 : 

D Sencha TIouch ; 

DQ 1U1; 

DQ JQTouch, 

1. Sencha Touch 

Sencha Touch 具 有 比较 明显 的 优势 ， 具 体 如 下 所 示 : 

口 界面 样式 标准 、 美 观 ， 开 发 团队 可 以 集中 于 应 用 功能 实现 ， 而 对 于 美工 方面 的 依赖 较 小 ; 

口 快速 的 页 面 啊 应 速度 和 美观 的 用 户 界 面 ; 

口 继承 Ext JS 下 的 恨 好 学 习 曲 线 和 开发 效率 ; 

口 用 户 界 面 风格 统一 ; 

口 基于 Sencha Touch 的 Sencha Chart 可 以 提供 丰 宣 的 图 表 制 作 能 

口 文 持 丰 宦 的 手势 操作 。 

此 外 ，Sencha Touch 也 具有 一 些 局 限 性 。Sencha Touch 文 持 主 流 的 移动 平台 ， 但 相对 jQuery 
Mobile 而 言 数 量 略 少 。 如 有 果 面 对 公众 用 户 开展 移动 应 用 开发 和 部 署 ， 选 择 Sencha Touch 就 要 谨慎 
一 些 。 一 些 专注 于 特定 行业 领域 应 用 的 信息 系统 开发 商 在 将 移动 应 用 迁移 到 Sencha Touch 之 后 ， 
取得 了 不 错 的 效 末 。 

如 采 和 希望 了 解 Sencha Touch 的 更 多 信息 ， 可 以 参见 其 官方 网 站 : http:/www.sencha.comy/products/ 
touch/。 

2. IU| 

iUI 也 是 一 种 基于 HTML 的 Web 移 动 应 用 开发 框 染 ， 则 在 为 Phone 和 与 iPhone 相 兼容 的 设备 开 
发 移动 应 用 。 该 开发 框 染 不 但 包含 其 他 开发 框架 所 具有 的 JavaScript 框 架 和 CSS, 甚至 包括 常用 的 
图 标 图 片 ， 保 证 了 开发 效率 和 界面 一 八 性 。 

iUI 的 主要 特性 如 下 所 示 : 

口 基于 标准 的 HTML 代 码 建立 具有 iPhone 风 格 的 导航 菜单 ; 

口 很 少 甚至 不 需要 JavaScript 就 可 以 建立 基于 HTML 的 应 用 界面 ; 

口 容易 开发 出 具有 iPhone 风 格 的 移动 应 用 ; 

口 适应 移动 手机 应 用 的 界面 设计 要 求 。 

如 果 大 家 想 了 解 iUI 的 更 多 信息 ， 可 以 参见 其 官方 网 站 : http:/www.iui-js.org/。 

3. JjQTouch 

jQTouch 也 是 一 个 基于 jQuery 的 Web 移 动 应 用 开发 框 淋 ， 大 概 在 2009 年 证 后 ， 它 对 Android、 
iPhone 和 基于 WebKit 核 心 的 桌面 浏览 器 支持 较 好 。 
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只 是 jQTouch 在 纷繁 的 移动 应 用 平台 和 移动 浏览 帮 框 架 的 环境 下 ， 莱 容 性 比较 弱 ， 所 以 并 不 
建议 使 用 jQTouch 进 行 跨 平台 的 移动 应 用 开发 ， 除 非 本 号 就 是 面 对 特 定 用 户 群 体 的 。 
如 果 大 家 想 了 解 jQTouch 的 更 多 信息 ， 可 以 参见 其 官方 网 站 : http://www.jqtouch.com/。 


1.5 jQuery Mobile 许可 协议 


jQuery Mobile 同 时 支持 GPL 和 MIT 两 种 开源 许可 协议 ， 这 为 开发 者 提供 了 更 为 灵活 的 法 律 框 
架 , 开 发 者 可 以 针对 不 同 的 使 用 场景 而 选择 不 同 的 许可 协议 ,这 与 jQuery 是 一 致 的 ,在 Visual Studio 
2012 中 ， 人 微软 已 经 将 jQuery Mobile 作 为 一 种 移动 应 用 解决 方案 集成 在 其 中 。 

MIT 是 一 种 与 GPL 协议 兼容 , 但 比 GPL、LGPL 或 者 BSD 更 加 宽松 的 协议 。 采 用 MIT 协 议 的 软 
件 可 以 用 于 商业 用 途 的 开发 和 销售 。MIT 协 议 源 目 肪 省 理工 和 学院 ( Massachusetts Institute of 
Technology，MIT )， 也 被 称 为 “Xi 许可 协议 ”(X License ) 或 “X11 许可 协议 ”( X11 License )。 

基于 MIT 协 以 ， 被 授权 人 可 以 有 权 使 有 用、 复制、 修改、 合并、 出 版 发 行 、 分 发 、 再 授权 及 销 
售 软件 及 软件 的 副本 , 也 可 以 根据 程序 或 者 软件 的 需要 而 修改 许可 协议 的 内 容 , 以 满足 商业 应 用 
的 需要 。 需 要 在 所 有 用 到 这 个 软件 的 副本 中 包含 版 权 声 明和 许可 声明 ,这 是 MIT 协 议 对 被 授权 人 
所 需要 承担 的 义务 的 要 求 。 基 于 MIT 许 可 协议 中 权利 和 义务 的 定义 ， 从事 商业 化 开发 的 软件 企业 
可 以 安全 地 使 用 jQuery Mobile。 

作为 开源 软件 的 开发 和 贡献 者 , 你 可 以 基于 GNU GPL 协议 来 进行 二 次 开发 ,并 基于 GNU GPL 
协议 再 分 发 这 样 的 开源 软件 。 


1.6 受 限 的 应 用 场景 


jQuery Mobile 是 一 种 Web 移 动 应 用 用 户 界面 系统 ， 大 多 运行 在 移动 设备 浏览 絮 中 ， 这 也 为 
jQuery Mobile 的 使 用 带 来 一 些 限制 。 例 如 ，Web 移 动 应 用 通常 不 能 直接 开发 手机 的 手电 简 功 能 ， 
因为 HTML 不 能 直接 操作 手机 里 面 的 硬件 设备 。 大 多 数 情况 下 ， 这 些 场景 都 是 与 便 件 集成 相对 紧 
密 或 者 需要 调用 操作 系统 核心 功能 的 应 用 。 

很 多 移动 应 用 不 需要 专门 与 硬件 进行 交互 ,例如 Web 邮 件 、 博 客 或 微 博 客户 端 、 企 业 信息 系 
统 ， 这 些 场 景 通常 是 适合 jQuery Mobile 的 。 另 外 一 些 传统 概念 里 必须 与 硬件 设备 集成 才能 运行 起 
来 的 功能 ， 在 移动 设备 浏览 带 和 HTML5 的 支持 下 ， 它 们 很 多 也 能 正常 运行 ,例如 地 理 定位 功能 。 
为 移动 设备 的 基于 GPS 或 者 基于 基站 定位 的 功能 已 经 集成 到 HTMLS 之 中 ,所 以 事实 上 在 这 些 场 
景 下 使 用 jQuery Mobile 也 没有 太 大 的 问题 。 

虽然 在 一 些 场 景 下 ，jQuery Mobile 无 法 直接 集成 移动 设备 的 核心 功能 ， 但 一 些 专门 针对 
HTMLS 的 开发 工具 ， 例 如 PhoneGap ， 能 够 帮助 开发 者 解决 这 些 问 题 。 基 于 PhoneGap 所 提供 的 一 
系列 接口 , 开发 者 可 以 方便 地 集成 移动 设备 中 的 地 理 定位 、 加 速 器 、 联系 人 、 声 音 和 振动 等 功能 。 
应 用 程序 开发 完成 之 后 , 也 可 以 通过 PhoneGap 封 装 成 不 同 移动 平台 下 的 应 用 , 包括 Android、 iOS、 
Windows Phone 等 ， 并 部 署 到 不 同 平台 之 上 。 


使 用 jQuery Mobile 开 发 一 侠 Web 移 动 应 用 页 面 与 开发 一 登 传统 的 Web 站 点 页 面 ， 并 没有 很 大 


差别 。 对 于 大 部 分 工程 师 而 言 ， 熟 悉 jQuery Mobile 的 框架 结构 ， 了 解 基本 的 HIML5S 语 言 ， 通 常 
很 快 就 能 开发 出 Web 移 动 应 用 程序 。 因 为 jQuery Mobile 已 经 基于 移动 界面 的 特点 进行 了 大 量规 范 
化 的 封装 。jQuery Mobile 的 优势 就 是 它 具 有 有 良好 的 学 习 曲 线 。 


在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

D jQuery Mobile 与 HTMLS 的 关系 ; 

D jQuery Mobile 框 架 的 组 成 ; 

口 创建 第 一 个 jQuery Mobile 应 用 “Hello World!”; 

口 发 布 jQuery Mobile 应 用 到 Web 服 务 器 ; 

口 安装 Android 模 拟 器 ， 并 通过 Android 内 置 浏览 器 访问 jQuery Moible 应 用 ; 
口 常用 的 jQuery Mobile 开 发 工具 。 


jQuery Mobile 与 HTML5 


虽然 在 很 多 早期 范例 代码 和 网 站 中 ,jQuery Mobile 可 以 通过 定义 div 的 方式 与 HTML 4 页 面 集 


成 , 但 是 在 最 近 发 布 的 jQuery Mobile 稳 定 版 本 中 ,需要 使 用 HTML5 而 不 是 HTML 4 来 开发 Web 移 动 
应 用 。 使 用 jQuery Mobile 1.0 alpha 版 本 的 开发 者 ， 需 要 特别 小 心 这 一 点 。 


在 jQuery Mobile 中 ， 经 常用 到 的 HTML5 新 特性 包括 : 
口 简化 而 实用 的 语义 标签 ; 

口 增强 的 表单 功能 ; 

口 原生 视频 和 音频 文 持 ; 

口 绘图 API; 

口 Web Sockets API ; 

口 离线 Web 移 动 应 用 ; 

DQ Web Storage; 

口 Web Worker 多 线程 ; 

口 基于 地 理 位 置 的 Geolocation API。 
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本 布 将 介绍 篆 用 的 HIMLS 撤 巧 以 及 实际 工作 中 与 HTML 4 相 异 的 部 分 等 基础 知识 , 但 不 会 重 
点 探讨 HTMLS 高 级 开发 技巧 。 


2.1.1 HTMLS5 的 演化 


HTML 4.01 是 1999 年 发 布 的 。 当 年 ， 大 量 Web 页 面 以 静态 页 面 呈 现 ， 一 些 需要 支持 动态 呈现 的 
功能 往往 通过 JavaScript 或 者 基于 组 件 的 技术 来 实现 。 之 后 随 着 互联 网 的 发 展 ， 越 来 越 多 的 动态 内 
容 被 融和 网站， 传统 HTML 语言 的 不 足 逐 渐 显 露出 来 。2006 年 ，W3C 与 WHATWG ( Web Hypertext 
Application Technology Working Group， 网 页 超 文本 技术 工作 小 组 ) 开始 合作 开发 新 的 HTML 语 言 ， 
在 2008 年 他 们 发 布 了 HTML5 的 工作 草案 。W3C 计 划 在 2014 年 发 布 HTML5 标 准 化 推荐 标准 。 

与 HIML 4.0.1 和 XHTML 1.0 相 比 ，HIMLS 和 草案 增加 了 很 多 新 的 HIML 标 记 ， 简 化 了 一 些 早 
期 的 HTML 标 记 ， 增 强 了 功能 ,定义 了 异常 处 理 和 非法 文档 的 细节 ， 并 使 浏览 姨 能 够 更 好 地 人 处理 
语法 错误 。 这 使 得 开发 者 可 以 更 加 高 效 地 开发 Web 应 用 ， 以 更 加 清晰 和 简洁 的 代码 实现 曾经 需要 
JavaScript 才 可 以 实现 的 功能 。 同 时 ， 一 些 传统 的 RIA ( Rich Internet Application， 军 因特网 应 用 ) 
也 被 HTML 所 取代 。 

HTML5S 草 案 现 在 还 不 是 W3C 的 推荐 标准 ( W3C Recommendation )， 却 已 经 被 业界 主流 厂商 
广泛 文 持 。 在 应 用 HTML5 从 事 开 发 的 过 程 中 ， 需 要 特别 留心 目标 受众 人 群 的 移动 终端 是 否 能 够 
支持 HTML5 的 新 特性 。 建 议 开 发 者 在 使 用 某 种 HTML5 新 特性 之 前 ， 根 据 目 标 受 众人 群 的 移动 设 
备 和 平板 电脑 浏览 器 类 型 ， 并 参照 http://mobilehtml5.org 所 发 布 的 兼容 性 列表 进行 功能 选择 ， 最 
好 在 目标 移动 设备 浏览 器 下 进行 羔 容 性 测试 。 


2.1.2 ”HTML5 新 特性 


与 HTML 4.01 和 XHTML 1.0 相 比 ，HTML5 在 一 些 HTML 代 码 结 构 、 界 面 样式 定义 和 标记 含义 
上 都 有 一 定 的 简化 和 重新 定义 。 此 外 ，HTML5 还 增强 了 一 些 新 功能 ， 如 表 2-1 所 示 。 


表 2-1 HTML5 新 特性 


新 特 性 含 义 
HIML 标 记 更 新 的 HTML5 标 记 
Canvas 2D 画布 技术 ， 通 过 脚本 动态 泻 染 位 图 图 像 
Web Messaging 跨 文档 消息 通信 。 例如， 癌 下 rame 中 的 HTML 发 送 消 息 
Web Sockets 基于 TCP 接 口 实 现 双 癌 通信 的 技术 
Drag and Drop 基于 Web 的 拖 忠 功能 
Microdata 实现 语义 网 的 技术 ， 通 过 自 定义 Web 页 面 词汇 表 扩 展 与 实现 语义 信息 
Audio Video 原生 的 首 频 与 视频 技术 
Web Workers 基于 JavaScript 的 多 线程 解决 方案 
Web Storage 将 信息 存储 于 浏览 需 本 地 。 与 Cookie 不 同 的 是 ，Web Storage 存 储 的 数据 更 多 


HTML+RDFa 实现 语义 网 的 技术 
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此 外 , 随 着 HTML5 的 发 展 , 一 些 与 HIML5 相 关 的 技术 也 被 浏览 可 厂商 所 文 持 , 例如 MathML 
以 XML 描述 数学 算法 和 逻辑 ，SVG 以 XML 描述 二 维 矢量 图 形 等 。 

jQuery Mobile 是 一 种 面向 浏览 右 的 JavaScript 界 面 实现 方案 。 在 一 些 场 景 下 ,适时 地 使 用 
HTML5 新 特性 将 有 助 于 增强 和 改善 用 户 体 验 ， 增 强 Web 移 动 应 用 的 功能 。 例 如 ， 在 实时 监控 
应 用 中 ， 通 过 Web Sockets 实 现 移 动 设备 与 服务 右 之 间 的 实时 双 辣 通信 。 在 面 对 公 众 的 内 容 发 
布 系统 上 ， 例 如 新 闻 或 者 UGC 社 区 ， 通 过 RDFa 或 者 Microdata 增 强 页 面 内 容 语义 来 优化 搜索 


引擎 。 


2.1.3 jQuery Mobile 应 用 中 经 常用 到 的 新 特性 


使 用 jQuery Mobile 1.0 Alpha 版 本 和 Beta 版 本 开发 Web 移 动 应 用 时 ， 是 基于 HTML 4.01 的 , 但 
是 在 jQuery Mobile 1.0 发 布 之 后 , Web 移 动 应 用 的 开发 已 经 转 为 基于 HTML5。 特别 是 jQuery Mobile 
1.3.0 所 增加 的 啊 应 式 设 计 等 新 特性 ， 需 要 基于 HTML5S 才 能 运行 。 

在 基于 jQuery Mobile 的 Web 移 动 应 用 中 ， 经 浓 用 到 的 HTMLS 新 特性 如 表 2-2 所 示 。 


表 2-2 jQuery Mobile 应 用 中 常用 的 HTML5 新 特性 


新 特 性 应 用 领域 
DOM 选 择 需 大 多 数 jQuery Mobile 选 项 、 属 性 和 事件 处 理 中 将 会 用 到 
增强 的 表单 功能 jQuery Mobile 表 单 
Media Queries 面 对 高 分 状 率 屏 硕 的 用 户 界 面 设 计 与 图 片 呈现 。 


屏幕 方向 发 生变 化 之 后 的 页 面 布 局 调整 。 
响应 式 设计 ，jQuery Mobile 1.3.0 之 后 开始 支持 。 


Session Storage 在 多 页 面 模板 环境 下 实现 参数 传递 

离线 Web 应 用 移动 应 用 运行 的 网 络 环境 通常 并 不 稳定 ， 可 能 在 2G 与 3G 移 动 网 络 之 间 切 换 或 者 在 移动 网 络 
与 Wi-Fi 之 间 切 换 其 至 断 网 。 在 网 络 不 可 用 的 时 候 ， 通 过 离线 Web 应 用 这 个 特性 ， 可 以 改善 
用 户 体 验 


此 外 , 还 有 一 些 HTMLS 新 特性 也 会 根据 业务 场景 需要 而 应 用 于 Web 移 动 应 用 中 , 例如 通过 男 
布 特性 泻 染 图 像 ， 或 者 通过 Geolocation 实 现 位 置 定位 服务 等 。 


2.2 下 载 jQuery Mobile 


基于 jQuery Mobile 开 发 的 移动 应 用 通常 包含 以 下 部 分 : 

口 jQuery JavaScript 文 件 ; 

口 jQuery Mobile JavaScript 文 件 ; 

D jQuery Mobile 层 车 样式 表 ; 

口 jQuery Mobile 图 形 资 源 库 。 

随 着 jQuery Mobile 新 版 本 的 发 布 , 其 执行 性 能 和 移动 设备 的 兼容 性 越 来 越 好 。 开 发 者 可 以 从 
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http:/jquerymobile.com/download/ 下 载 最 新 版 本 的 jQuery Mobile 库 。 此 外 ， 建 议 开 发 者 定期 检查 
jQuery Mobile 的 版 本 更 新 情况 。 

如 果 将 jQuery Mobile 代 码 托管 在 自己 的 服务 右上 ， 建 议 下 载 ZPP 格 式 的 压缩 文件 ， 这 个 压缩 
文件 包括 jQuery Mobile 库 、 层 羞 样式 表 以 及 与 之 配套 的 图 片 资源 , 但 并 没有 包括 jQuery JavaScript 
库 。 厂 想 下 红 jQuery JavaScript 库 ， 可 以 访问 http:/www.jquery.com/。 

开发 者 可 以 按照 下 面 的 方法 在 HTML 页 面 中 集成 jQuery Mobile: 

口 将 jQuery Mobile 托 管 在 网 站 自己 的 服务 器 ; 

口 在 页 面 中 访问 http://code.jqguery.com 站 点 中 托管 的 代码 资源 。 

对 于 上 面 的 两 种 方法 , 我 们 建议 使 用 第 一 种 方法 , 这 是 因为 国内 用 户 连接 国外 互联 网 资源 的 
速度 都 比较 慢 。 如 果 将 jQuery Mobile 相 关 文 件 部 署 在 国内 的 服务 器 ， 则 可 以 大 大 加 快 移动 设备 的 
访问 和 呈现 速度 。 


小 经 验 有 条 件 的 话 ， 建 议 将 Web 移 动 应 用 的 CSS、jJavaScript 和 图 片 等 静态 文件 通过 CDN 分 发 。 
在 选择 部 署 Web 移 动 应 用 的 IDC 机 房 时 ， 这 个 机 房 的 线路 一 定 要 有 很 好 的 网 路 品质 ， 还 
要 能 保证 与 各 个 移动 运营 商 的 网 络 连接 通畅 。 测 试 从 移动 运营 商 网 络 下 访问 Web 移 动 应 
用 时 ， 尽 量 选 择 尽 可 能 多 的 城市 。 有 时 候 ， 即 便 在 同一 个 运营 商 网 络 中 ， 一 个 城市 能 
够 访问 到 Web 移 动 应 用 ， 换 一 个 城市 后 却 不 可 以 访问 了 。 这 对 于 支持 2G 网 络 环境 下 的 
Web 移 动 应 用 尤其 重要 。 


如 果 硕 望 下 接 使 用 jQuery 所 托管 的 代码 资源 ， 则 只 需要 在 HTML 页 面 head 标 记 中 加 入 下 面 的 
代码 即 可 : 


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 


小 经 验 在 jQuery Mobile 官 方 网 站 的 下 载 页 面 或 ZIP 格 式 的 压缩 文件 中 ,你 会 看 到 xxx.min.js 或 者 
XXX.min.css 文 件 ， 比 如 jquery-1.7.1.min.js、 jquery.mobile-1.3.1.min.js、 jquery.mobile-1.3.1. 
min.css， 同 时 也 可 以 看 到 不 包含 “min” 文 学 的 文件 。 

两 种 文件 的 区 别 在 于 包含 “min” 的 文件 对 JavaScript 或 者 CSS 进 行 了 压缩 ， 删 除了 不 需 
要 的 回 车 、 空 格 键 等 内 容 ， 这 样 文件 体积 更 小 。 如 果 只 是 调用 而 不 是 调试 ， 建 议 部 署 
min 文 件 ， 这 样 将 有 助 于 减少 移动 网 络 流量 ， 提 升 移动 设备 打开 HTML 页面 的 速度 。 


2.3 ”第 一 个 程序 
如 同 所 有 软件 开发 教程 一 样 ， 我 们 的 第 一 个 范例 也 是 Hello World!。 
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2.3.1 开发 前 的 准备 


Web 移 动 应 用 的 核心 是 通过 HTML 页 面 实现 的 ， 因 此 调试 包括 jQuery Mobile 在 内 的 Web 移 动 应 用 
与 调试 传统 网 页 程序 的 方式 基本 上 一 致 。 建 议 开 发 者 首先 在 文 持 HTMLS 的 条 面 浏 览 融 上 调试 通过 ， 
然后 再 进行 移动 设备 的 兼容 性 测试 。 这 里 推荐 使 用 安装 了 Firebug 的 Firefox 浏 览 希 。 如 采 移 动 设备 浏 
览 需 的 兼容 性 在 jQuery Mobile 的 官方 文 持 列 表 中 属于 A 级 ， 那 么 兼容 性 测试 通常 都 会 顺利 通过 。 

在 开发 Web 移 动 应 用 时 ,最 好 能 在 基于 吕 面 浏 响 右 的 测试 之 外 ， 还 能 够 针对 用 户 特 点 安装 移 
动 设备 模拟 帮 。 在 模拟 器 环境 中 ,模拟 通 过 移动 设备 访问 移动 和 应用， 并 由 此 检查 Web 移 动 应 用 设 
计 中 的 缺陷 和 待 改 进 的 特性 。 开 发 者 也 可 以 将 Selenium 测 试 系统 与 移动 设备 浏览 如 集 成 ， 以 实现 
路 平台 的 验收 测试 和 回归 测试 自动化。 

在 从 事 jQuery Mobile 开 发 和 测试 的 时 候 ， 建 议 能 够 部 署 某 个 Web 服 务 器 用 以 发 布 和 测试 这 个 
Web 移 动 应 用 。Web 服 务 需 可 以 是 IIS( Internet Information Server, Internet 信 息 服 务 )_ Apache HTTP 
服务 融 或 者 其 他 文 持 HTITP 协 议 的 Web 服 务 需 。 


2.3.2 Hello World 


一 个 简单 的 jQuery Mobile 应 用 程序 与 通常 的 HTML 页 面 差别 不 大 ， 通 常 包 含 这 样 几 个 部 分 : 
基于 HTML5 的 代码 框架 、jQuery JavaScript 库 和 jQuery Mobile JavaScript 库 。 
这 里 我 们 介绍 的 第 一 个 jQuery Mobile 应 用 为 Hello World! ， 其 代码 如 代码 清单 2-1 所 示 。 


代码 清单 2-1 Hello World! 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.css" /> 
<SCITipt src="js/jquery-1.7.1.min.js"></script> 
<script src="jSs/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.]js"></script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1>jQuery Mobile 跨 平台 移动 应 用 </h1> 
</header> 
<div class="content" data-role="content"> 
<p><a href="Section02/HelloWorld.html"> Hello World!</a></p> 
</div> 
<footer data-role="footer"> 
<h1> 页 脚 </h1> 
</footer> 
</section> 
</body> 
</html> 
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在 上 面 的 框架 中 ， 主 要 涉及 下 面 的 内 容 。 

口 <!1DOCTYPE html>: 它 是 HTML5 新 的 标签 定义 ， 表示 一 个 HTML5 文 档 的 开始 。 在 任何 使 用 

jQuery Mobile 实 现 的 页 面 中 ， 必 须 以 <!DOCTYPE html> 开 始 。 

口 chtml>、<head> 和 <body>: 这 些 标签 继承 自 HTML 4 标准 ， 表 示 HTML 文 档 的 各 个 部 分 。 

四 《<html> 标签 表示 HTML 文 档 的 开始 ， 而 </html> 则 表示 文档 的 结 
四 《<head> 和 </head> 之 间 用 于 放置 HTML 文 档 的 头 部 信息 和 3 引用 ,包括 JavaScript 引 用 和 CSS 
引用 。jQuery JavaScript 文 件 和 jQuery Mobile JavaScript 文 件 就 需要 标记 在 这 部 分 。 
四 《<body> 和 </body> 则 包含 能 够 被 呈现 给 用 户 的 部 分 。 
口 <meta charset="utf-8">: 表示 页 面 内 容 的 学 特集， 用 于 多 语言 显示 。 
口 <meta name="viewport"” content="width=device-width，initial-scale=1">: 表示 适合 移 
动 设备 屏 帮 。 如 采 忽 略 设置 viewport， 将 导致 移动 应 用 显示 内 容 过 小 而 难以 阅读 。 
在 jQuery Mobile 开 发 中 ， 单 页 模板 表示 一 个 网 页 包含 一 个 页 面 ， 这 与 传统 的 网 页 开发 一 致 。 
在 jQuery Mobile 的 多 页 模板 开发 中 ,一 个 网 页 可 以 包含 多 个 页 面 , 并 通过 Ajax 方 式 实现 页 面 跳 转 ， 
具体 请 参见 3.1 方 。 
在 不 同 的 移动 设备 和 分 辨 率 下 ， 除 了 设置 viewport 之 外 ， 还 可 以 通过 Media Queries 技 术 实 现 
在 不 同 屏 硕 方 器 和 分 辨 座 下 载 入 不 同 背 景 图 片 或 CSS 样 式 设计 的 功能 。 关 于 viewport 和 Media 
Queries 的 具体 介绍 ， 请 参见 11.1 节 。 
在 <body> 标 签 中 ， 我 们 定义 了 这 样 儿 部 分 内 容 。 
口 <section data-role="page">: 用 于 设置 data-Tole 属 性 为 page， 表 示 所 在 section 容 带 中 的 
内 容 为 一 个 页 面 。 

D 口 “header> 标 签 所 包含 的 部 分 是 页 面 中 的 页 眉 ， 而 <footer> 标 签 所 包含 的 部 分 则 是 页 面 中 的 
页 脚 。 页 眉 和 页 脚 除了 用 于 必要 的 信息 显示 之 外 ， 还 可 以 通过 添加 导航 按钮 实现 导航 功 
能 。 有 关 页 眉 、 页 脚 的 使 用 方法 ， 请 参见 第 8 章 。 

口 <div class="content" data-role="content">: 表示 其 内 容 为 移动 应 用 界面 的 正文 部 分 。 

使 用 Google Chrome 训 览 融 运行 该 程序 ， 得 到 的 结果 如 图 2-1 所 示 。 
EY" x 


jQuery Mobile 跨 平 台 特 x 


€ CC 口 localhost/jqmysection02/hello\sz 妃 加 三 
jQuery Mobile 跨 干 台 .…. 


Hecllo VVorld! 


图 2-1 ” Chrome 下 所 呈现 的 Hello World! 
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在 Android 4.0.3 模 拟 器 中 运行 该 程序 ， 得 到 的 界面 效果 如 图 2-2 所 示 。 


和 


国 192.168.1.103/jqm/Sectio 二 


jQuery Mobile .- 


Hello World! 


图 2-2 Android 4.0.3 下 所 呈现 的 Hello World! 


至 此 ， 我 们 完成 了 第 一 个 用 jQuery Mobile 开 发 的 Web 移 动 应 用 程序 。 


2.4 发 布 应 用 


一 般 情况 下 ， 移 动 设备 通过 HTTP 或 者 HTTPS 的 方式 访问 Web 应 用 。 因 此 ，Web 应 用 只 需要 
发 布 到 HTTP 服 务 顺 并 能 够 被 移动 设备 访问 到 ， 就 算 完 成 了 发 布 。 这 里 我 们 简单 介绍 一 下 基于 IIS 
实现 Web 应 用 发 布 的 过 程 。 

HS 是 运行 在 Windows 之 上 的 一 种 兹 匈 HTTP 服 务 磊 ， 可 以 安装 在 Windows 7、Windows Server 
2008 等 操作 系统 上 。 很 多 互联 网 服务 商 也 提供 基于 IIS 的 虚拟 机 或 虚拟 主机 ， 采 用 这 种 方案 来 搭 
建 和 部 署 自己 的 Web 移 动 应 用 的 成 本 较 低 。 

在 实际 生产 环境 中 ， 很 多 网 站 或 Web 移 动 应 用 除了 采用 IIS 之 外 ， 也 会 采用 Apache、Nginx、 
Lighttpd 或 者 直接 使 用 JBoss 或 者 Tomcat 搭 建 。 这 些 都 能 提供 HTTP 服 务 ， 只 是 环境 不 同 ， 各 有 
利弊 。 


2.4.1 安 妆 1S 


下 面 以 Windows 7 环境 为 例 ， 简 要 介绍 IIS 的 安 痛 和 部 署 过 程 。 

首先 检查 Windows 7 中 是 否 已 经 安装 了 IIS。 打开 “控制 面板 ”, 选择 “程序 和 功能 ”, 选择 “ 打 
开 或 关闭 Windows 功 能 ”。 此 时 如 果 发 现 “Internet 信 息 服务 ”为 选中 状态 ， 则 表示 已 经 安装 了 IIS， 
如 图 2-3 所 示 。 人 否则 ， 驶 需要 安 闻 IIS。 
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相间 或 关闭 Windows 功能 La 
车 要 打 咱 一 种 助 能 ， 请 选择 其 复 选 框 。 首 要 其 闻 一 种 功能 ,请 清除 其 所 选 
框 。 碎 这 的 框 志 示 人 避 打 开 访 功能 的 一 部 售 。 
eet 伟 息 腿 乞 
回回 风 FTF 服务 饥 
田 Web 雪 埋 | 具 
日 | 万 准 网 服务 
于 国 册 安全 尾 
日 | 常见 HTTP 功能 
| HTTP 猪 误 
1 HTTP 重 定 向 
1 WebDAW 点 布 
) 静 专 和 内容 
| 黑 认 误 档 
1 目 示 剖 咒 


图 2-3 ”安装 IIS 


点 击 “Internet 信 息 服 务 ” 之 后 ， 默 认 会 选择 大 部 分 最 常用 的 HIS 功 能。 当然 ， 开 发 者 也 可 以 进 
一 步 检 查 IIS 安 装 模 块 和 功能 , 核实 上 自己 所 需要 的 功能 是 否 都 被 安装 上 。 在 检查 是 否 安装 [IS 的 时 候 ， 
建议 检查 “和 常见 HTTP 功 能 ”项 ， 将 主要 功能 都 选择 并 安装 。 通 常 ， 需 要 至 少 包 括 “HTTP 错 误 ”、 
“静态 内 容 ” 和 “默认 文档 ”3 个 功能 。 否 则 ， 实 现 一 些 功能 或 者 解决 稼 用 问题 时 将 会 遇 到 困难 。 

安装 完 IIS 之 后 ， 在 “控制 面板 ”下 的 “管理 工具 ”中 可 以 找到 “Internet 信 息 服务 (IIS ) 管 
理 禹 "。 打 开 IIS 管 理 硕 ， 界 面 如 图 2-4 所 示 。 


回回 回国 丐 回 


奢 Internet 信息 服务 (TS) 管 理 嚣 Em 
@ (yy 全 ，A-LUMING- 网 站 ， Default Web Site } 自作 
文件 (FP ”视图 (V) ”帮助 (H) 
连接 > 操作 
Ek | \ Default Web Site 主页 = 机 
al | ey ri 
ES 9 化 选 : > 和 开始 (G) 、 可 渍 得 从 民 
4 . 男 网 站 ASP.NET 司 
4 @ DefautVs Ee | 所 a 
: b. ABTY .NET 编译 .NET 错误 页 .NET 配置 文 查看 应 用 程序 
| 二 件 查看 虚拟 目录 
国明 OO 8 久 管理 网 站 和 
| “时评 JNET 全 球 化 .NET 授权 规 .NET 信任 级 sa 
| 则 别 b 
[as 国 停止 
全 他 Es 
> -| js 了 司 & 折 浏览 网 站 
> - 国 m SMTP 电子 会话 状态 。 计算 机 密 铀 刘 览 *:80 (http) 
, .= 邮件 


图 2-4 安装 完成 后 的 IIS 管 理 需 
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此 时 启动 服务 器 ， 打 开 地 址 http:/127.0.0.1/， 通 常 可 以 看 到 如 网 2-$ 所 示 的 页 面 。 
| 


加 TS7 


ee[G17001 家 有 六 a | 


Welt , 如 
Welkommen 
Benvenuto 
Welxom 


internet information services 
Valkommen 


Hos Geldiniz 大 -Oj 二 


图 2-5 IIS 7 欢迎 页 面 


2.4.2 ”通过 IIS 发 布 Web 移 动 应 用 


在 安装 完 IS 之 后 ， 就 可 以 使 用 移动 设备 浏览 融 访 问 网 站 内 容 。 将 Web 应 用 发 布 到 IIS 有 两 种 
方法 : 一 种 是 以 Web 站 点 方式 发 布 ， 男 一 种 是 以 虚拟 目录 或 应 用 程序 的 方式 发 布 。 

如 果 移 动 应 用 直接 以 Web 站 点 的 形式 发 布 ， 那么 当 使 用 者 打开 浏览 絮 ， 输 入 这 个 站 点 的 地 址 
时 ， 就 可 以 下 接 打 开 这 个 应 用 。 

很 多 情况 下 ，Web 移 动 应 用 会 和 其 他 桌面 Web 应 用 发 布 在 同一 个 站 点 下 ， 但 各 自 使 用 不 同 
的 目录 。 此 时 ， 就 可 以 将 Web 移 动 应 用 部 署 在 这 个 Web 站 点 下 的 一 个 虚拟 目录 或 者 应 用 程序 中 。 
当 网 络 用 户 浏览 虚拟 目录 或 IS 站 点 的 应 用 程序 时 ,输入 的 URL 地 址 看 起 来 是 这 个 域名 下 的 一 个 
目录 。 

本 书 的 演示 内 容 都 是 静态 内 容 ， 所 以 在 发 布 到 IIS 的 时 候 ， 我 们 使 用 的 是 虚拟 目录 的 发 布 方 
式 。 对 于 现实 应 用 中 的 Web 移 动 应 用 而 言 ， 因 为 大 多 是 动态 网 站 ， 所 以 一 般 都 部 署 为 独立 Web 站 
点 或 应 用 程序 ， 而 不 是 虚拟 目录 。 

这 里 我 们 以 将 jQuery Mobile 移 动 应 用 部 署 在 一 个 名 为 jqm 的 虚拟 目录 为 例 ， 演 示 在 IIS 环 境 中 
发 布 Web 移 动 应 用 的 方法 。 其 他 部 署 在 网 站 根 目 录 或 应 用 程序 的 方法 与 部 署 虚 拟 目录 的 方法 大 致 
相当 。 

首先 局 动 “ 控 制 面板 ”， 选 择 “ 管 理工 具 ”， 接 着 选择 “Internet 信 息 服 务 (IIS ) 管理 需 ”， 然 
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后 选择 所 要 发 布 的 网 站 ， 这 里 我 们 会 选择 默认 的 网 站 Default Web Site。 然 后 在 选中 的 网 站 上 单 击 
鼠标 右键 选择“ 添加 虚拟 目录 ， 如 图 2-6 所 示 。 

圈 Internet 信息 服务 (IS) 管 理 颖 a 

GG S 约 ，LUMING-PC 、 网 站 、Defau 


文件 (F) ”视图 (V) ”帮助 (H) 


一 过 Defs 


4 网 站 ASP.NET 
4 车 DefautwWebsitel || 时 > 
| aspn 硕 。” 浏 星 
> - 屿 jqm 编 强 权限 .. " 


全 一 


轩 刷新 (R) 
XK 删除 


重 命名 
加 切换 到 内 容 视图 


图 2-6 ”添加 虚拟 目录 


此 时 将 打开 “添加 虚拟 目录 ”对 话 杠 ， 如 图 2-7 所 示 ， 在 其 中 输入 希望 用 户 访问 的 路 径 名 和 
所 指 回 的 页 面 地 址 ， 束 可 以 实现 虚拟 路 径 的 发 布 。 在 后 续 的 代码 范例 中 ， 我 们 将 采用 jqm 作 为 虚 
拟 路 径 发 布 Web 移 动 应 用 ， 因 此 在 之 后 的 演示 代码 中 将 可 以 看 到 包含 有 jqm 字 样 的 URL 地 址 。 


添 I 虚拟 目录 - 


网 站 名 称 : Default Web Site 
路 径 : 


别名 (A): 


示例 : 喘 侮 
输 理 路 径 (P): 


传送 身份 验证 


连接 为 ( 〇 .… 


图 2-7 “添加 虚拟 目录 ”对 话 框 
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在 本 书 所 有 范例 的 运行 环境 中 ， 我 们 都 是 通过 部 署 在 HS 的 虚拟 目录 下 来 发 布 的 。 对 于 不 同 的 
开发 环境 ， 开 发 者 也 可 以 选择 HS 之 外 的 应 用 服务 需 部 署 移动 应 用 ， 例 如 Apache 服 务 融 或 者 Nginx 服 
务 2 


2.5 移动 设备 模拟 器 


基于 jQuery Mobile 开 发 的 移动 应 用 可 以 运行 在 大 多 数 昌 面 操作 系统 上 , 开发 过 程 的 大 部 分 时 
间 可 以 基于 香 面 浏览 融 来 进行 ,这 将 有 助 于 提升 开发 效率 。 在 正式 发 布 应 用 之 前 , 我们 建议 使 用 
移动 设备 模拟 需 或 实际 的 手机 或 平板 电脑 来 执行 用 户 验 收 测试 , 以 确保 最 终 的 用 户 体验 与 预期 的 
一 样 。 移动 设备 模拟 需 是 一 种 可 以 运行 在 PC 上 的 虚拟 化 技术 。 基 于 模拟 融 , 用 户 可 以 在 Windows、 
Mac 或 者 Linux 等 操作 系统 中 模拟 某 种 移动 操作 系统 ,并 在 这 个 操作 系统 中 安 交 和 调试 所 开发 的 应 
用 。Android 模 拟 需 的 运行 界面 如 网 2-8 所 示 。 


| 55544OM2 


I 
Pe We po po pn pny fr oe ep ry 
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图 2-8” Android 模拟 需 的 运行 界面 


2.5.1 安装 Android 模 拟 器 


如 朱 要 安装 Android 模 拟 希 , 首先 需要 检查 计算 机 中 是 否 安装 了 JDK, 如 宁 没 有 安装 JDK( Java 
SE Development Kit )， 则 需要 先 安装 JDK。Java JDK 的 下 载 地 址 为 http://www.oracle.com/ 
technetwork/Java/Javase/downloads/index.html, 

接着 下 载 Android SDK， 其 下 载 地 址 为 http://developer.android.com/sdk/index.html。 
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注意 截至 笔者 完稿 时 ，Android SDK 还 不 能 运行 在 Windows 8 环境 中 ， 所 支持 的 Windows 操 作 
系统 的 最 高 版 本 为 Windows 7。 


按照 提示 下 载 完 Android SDK 后 ， 就 可 以 安装 和 配置 Android 模 拟 带 环境 了 。 在 Windows 操 作 
系统 中 ,进入 “所 有 程序 ”， 展 开 Android SDK Tools 有 菜单， 点 击 Android SDK nn 末 蛙 项 ， 进 
人 Android SDK Manager 管 理工 具 ， 如 岁 2-9 所 示 。 开 发 者 可 以 通过 这 个 工具 管理 和 下 载 所 需要 的 
不 同 Android 版 本 的 模拟 吉安 狠 包 。 


Android SDK Manager 

Packages Tools 

SDK Path: C:\Program Files (x86)\Android\android-sdk 
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Android 4.0.3 (API 15) 

党 Documentation for Android SDK 

Wh SDK Platform 

Samples for SDK 

本 ARM EABI v7a System Image 

局 Google APIs by Google Inc. 

骂 HTC OpenSense SDK by HTC 

硫 ICS_RI by Motorola Mobilty, Inc. 

Sources for Android SDK 

API 10 

器 Inte/ Atom x86 System Image by Intel Corpc 
电 Dual Screen APIs by KYOCERA Corporation 
器 Rea/3D by LGE 

器 ATRIX2 by Motorola Mobility;, Inc. 

器 和 X7928 by Motorola Mobility, Inc. 
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己 
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外 Installed 
外 Installed 
外 Installed 
外 Installed 
外 Installed 
$ Not installed 
$ Not installed 
外 Installed 


[oe 


Not installed 
$ Not installed 
$ Not installed 
量 Not installed 
$ Not installed 
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加 
加 


Show': 


< 


Updates/New IY|Installed Obsolete Select New or Updates Install packages... 


Sort by: 图 API level DS Repository Deselect All Delete packages.. 


Be 


Done loading packages. 


图 2-9 Android SDK Manager 


在 安 痛 各 个 包 的 时 候 ， 会 提示 许可 协议 接受 界面 ， 如 图 2-10 所 示 。 在 接受 之 后 ， 安 闭 过 程 会 
继续 下 去 。 


Choose Packages to Install 


Packages Package Description & License 


Androlid SDK Tools, revision 20 Package Description 
v Android SDK Platform-tools, revision .., Android SDK Tools, revision 20 


This update will replace revision 16 with revision 20. 


Dependencies 
Installing this package also requires installing: 
- Android SDK Platform-tools, revision 12 


D Accept © Reject 


图 2-10 ”许可 协议 接受 界面 
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本 书 所 使 用 的 模拟 硕 环 境 为 Android 4.0.3， 开 发 者 可 以 根据 业务 场景 需要 选择 安装 合适 的 模 
拟 阵 环境 。 


2.5.2 ”创建 Android 模 拟 器 


在 通过 Android SDK Manager 下 载 和 安装 模拟 兹 之 后 ， 可 以 通过 Android Virtual Device 
Manager 创 建 所 需 的 Android 虚 拟 设备 。 开 发 者 可 以 为 每 一 个 独立 的 Android 运 行 场 景 单独 创建 
Android 虚 拟 设 备 ， 例 如 平板 电脑 、 手 机 或 者 其 他 通信 式 设备 ， 以 便 在 独立 的 运行 环境 之 间 进 行 
开发 、 部 署 和 测试 。 

在 用 户 体验 和 很 多 细节 表现 上 ，Android 虚 拟 设备 并 不 如 实际 移动 设备 操作 方便 ， 特 别 是 触 
探 操作 方面 。 而 从 开发 、 调 试 、 集 成 与 测试 的 成 本 和 效率 来 看 ， 首先 在 移动 设备 模拟 硕 上 进行 开 
发 ， 然 后 再 迁移 到 实际 手机 或 平板 电脑 进行 测试 ,将 有 助 于 提升 开发 生产 率 ,快速 稳定 产品 的 质 
量 ， 加 快 产品 投放 市 场 的 速度 。 

在 Android SDK 中 , 可 以 通过 Android 虚 拟 设 备 管理 天 来 创建 、 编 辑 或 者 删除 不 同 的 虚拟 设备 。 
在 Windows 操 作 系 统 中 ,， 点击“ 所 有 程序 ” 亲 单 , 展开 Android SDK Tools 有 菜单 ,点击 AVD Manager 
便 可 以 进入 Android Virtual Device Manager 界 面 ， 如 图 2-11 所 示 。 


Androld Virtual Device Manager 二 | 日 


Tools 


List of existing Androld Virtual Devices located at Ci\Users\Lu Ming\.android\avd 


AVD Name Target Name Platform API Level CPU/ABI New... 
No AVD available 


fr 


w A valid Android Virtual Davice. “3 A repairable Android Virtual Device. 
xX An Android Viriual Device that failed to load., Click ‘Details' to see the error., 


图 2-11 Android Virtual Device Manager 寞 面 


点 击 New 按 钮 , 可 以 在 Create new Android Virtual Device(AVD) 界 面 中 创建 所 需 的 Android 虚 拟 
设备 ， 如 图 2-12 所 示 。 我 们 将 这 个 虚拟 设备 命名 为 jQueryMobile， 并 选择 目标 运行 平台 为 Android 
4.0.3 - API Level 13 。 


小 技巧 Snapshot 选 项 表示 对 虚拟 设备 建立 快照 ， 建 议 开发 者 选中 这 个 选项 。 这 样 虚 拟 设备 将 能 
够 通过 建立 快照 的 方式 帮助 开发 者 保留 上 次 开发 与 操作 的 内 容 ， 并 能 在 下 次 启动 虚拟 
设备 的 时 候 ， 直 接 进 入 上 次 关闭 前 的 状态 。 这 可 以 省 去 Android 系 统 每 次 重新 启动 的 时 
间 。 对 于 开发 jQuery Mobile 应 用 而 言 ， 这 是 一 个 提升 开发 效率 的 技巧 。 
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Create mew Android Virtual Dewce (AVDY 


Name: JQueryMobile 


Target: |Android 4.0.3 - API Level 15 -| 
CPU/ABI: |ARM [armeabi-via) 
sD Card: 


故 Se | 256 |MiB -| 


生 ) File: OWSE.. 


snapshot: 
加 | Enabled 


入 | Built-in: | Default wwwGASsOO 下 | 


全) Resolution: 


Hardware: 


Property 
Abstracted LCD density 
Max VM application h.,, 


Dewvice ram slze 


Override the existing AVD with the same name 


图 2-12 Create new Android Virtual Device 对 话 框 


在 点 击 Create AVD 按 钮 之 后 ,会 打开 一 个 确认 对 话 框 ， 如 果 确 认 对 话 框 和 所 要 创建 的 
Android 虚 拟 设 备 一 致 ， 则 点 击 确 认 。 在 Android 虚 拟 设 备 管理 需 列 表 中 ， 选 择 要 启动 的 虚拟 设 
备 ， 例 如 刚刚 创建 的 名 为 jQueryMobile 的 虚拟 设备 ， 并 点 击 管理 融 右 侧 的 Start 按 钮 ， 则 可 以 局 
动 虚拟 设备 。 

在 创建 AVD 的 时 候 ， 如 果 选 择 了 Snapshot 选 项 ， 则 可 以 直接 基于 上 次 关机 时 的 快照 将 虚拟 设 
备 运行 起 来 。 例如， 上 次 关闭 虚拟 设备 的 时 候 ， 浏览 絮 停 留 在 某 个 页 面 ， 则 这 次 打开 将 直接 恢复 
到 上 次 关闭 的 位 置 。 这 就 是 快照 功能 。 图 2-13 所 示 为 Launch Options 对 话 框 ， 其 中 Launch from 
snapshot 表 示 从 上 一 次 关闭 的 快照 中 恢复 和 运行 虚拟 设备 ，Save to snapshot 表 示 在 退出 模拟 硕 的 
时 候 ，Android 虚 拟 设 备 的 快照 将 会 目 动 保存 。 

启动 虚拟 设备 的 时 候 ， 可 以 根据 目标 设备 的 尺寸 设置 屏幕 尺寸 和 分 辨 率 ， 例 如 三 星 Galaxy 
Note I19200 为 5.3 寸 屏 ，Galaxy S3 19308 为 4.8 寸 屏 ，I9100 为 4.3 寸 屏 。 


2.5 移动 设备 模拟 器 


Launch Options 


Skin: WVGA800 (480x800) 
Density: High (240) 


scale display to real size 


| Wipe user data 


VY| Launch from snapshot 


只 | Save to snapshot 


图 2-13 ”Launch Options 对 话 框 


2.5.3 ”使 用 Android 模 拟 器 
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在 使 用 Android 虚 拟 设备 的 时 候 , 可 以 直观 地 看 到 界面 所 呈现 的 内 容 , 如 图 2-14 所 示 , 开发 者 


可 以 基于 键盘 或 者 模拟 带 界 面 中 的 按键 进行 界面 操作 。 


下 5554:jQM2 i | 5554:jQueryMobile 


ym wp py pre pp rey PE 


yh Ty mW A eg po Ey SAAN 


图 2-14 水平 显 示 与 垂直 显示 的 Android 模 拟 需 


虽然 大 部 分 操作 都 可 以 通过 鼠标 点 击 Android 模 拟 需 中 的 键盘 和 按钮 来 实现 , 但 是 使 用 键盘 快 
捷 方 式 可 以 加 快 用 户 界面 的 操作 速度 , 特别 是 一 些 模拟 器 操作 几乎 只 能 基于 键盘 快捷 方式 来 实现 ， 
例如 全 屏 显 示 、 调 整 水 平 显示 或 者 垂直 显示 。 表 2-3 列 出 了 和 铝 用 的 一 些 Android 横 拟 需 快捷 方式 。 
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表 2-3” ”Android 模 拟 器 


返回 Home 屏 幕 
羔 单 键 Menu 

Star 

返回 

拨号 

挂 断 电话 结束 通话 
查找 

电源 按键 


水 平方 向 与 垂下 方向 切换 


水 平方 向 与 垂直 方向 切换 ， 与 上 一 条 


启动 或 关闭 网 络 
启动 Code Profiling 


全 屏 模式 
轨迹 球 模式 
临时 进入 轨迹 球 模式 


小 经 验 此 外 , 还 有 一 些 其 他 的 Android 模 拟 器 


快捷 方式 


快捷 方式 
Home 
F2 或 Page Up 
Shift+F2 或 Page Down 
Esc 
F3 
F4 
FS 
F7 
长 时 间 按 下 ， 进 入 关机 菜单 
Ctrl+F11 
Ctrl+F12 
上 8 


F9 

启动 模拟 髓 ， 需 要 -traces 选 项 
Alt+Enter 

F6 


Delete 


器 快捷 方式 , 但 是 它们 与 使 用 jQuery Mobile 开 发 Web 


nt 关联 不 是 很 大 , 在 此 就 不 一 一 列举 , 例如 增加 或 减少 音量 、 启 动 摄像 头等 。 如 
你 希望 获得 更 多 信息 ， 可 参见 http://developer.android.com/tools/help/emulator.html。 


2.6 jQuery Mobile 开发 工具 


jQuery Mobile 开 发 与 通常 的 HTML5 页 面 开 发 没有 特别 大 的 差别 ， 其 核心 是 一 套 JavaScript 与 
Themes 的 定义 。 只 要 文 持 HTML5 开 发 的 主流 开发 工具 ， 一 般 都 可 以 用 于 jQuery Mobile 开 发 。 


下 面 推 厦 几 种 开发 工具 : 
DQD Notepad++; 
D UltraEdilt; 


口 安装 有 Aptana 插 件 的 Eclipse; 


D Adobe Dreamweaver; 


口 Visual Studio 2010 或 Visual Studio 2012 ; 


DQ MyEcllipse。 
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这 样 的 工具 还 有 很 多 ， 开 发 者 可 以 根据 自己 的 开发 环境 与 豆 好 进行 选择 。 
在 调试 HTML5 代 码 的 时 候 ， 推 荐 使 用 Firefox 浏 ee i、Google Chrome 浏 览 
器 的 “开发 者 工具 ”或 者 IE 10/IE 11 所 带 的 “F12 开 发 人 员工 具 ”。 
开发 者 可 以 使 用 Firebug 检 查 Web 页 面 的 执行 状况 、 调 试 、 记 录 日 志 、 优 化 性 能 、 监 控 网 络 状 
况 、 调 试 和 开发 页 面 CSS Layout 层 等 。 这 将 有 助 于 提升 开发 Web 应 用 的 质量 和 效率 。 图 2-15 是 使 
用 Firebug 观 察 jQuery Mobile 的 Hello World! 程 序 的 界面 截屏 。 


| 所 路 平台 移动 应 用 [#| 
© Li fileV/DVySVN OO C | 图- BE Pi 全 7 会 | 四 -| 人 白 | 加 7 晤 "| 详 |- 
jQuery Mobile 跨 平 台 移动 应 用 | 


Hello Worldl 


并 P| 《 >》 | 三 | -| 控制 HTML css 脚本 | DOM | 网络 Ses 


i 1 全 
+ jQuery171034831483305605515 Object { events—{...}, toJS0N-function(), handle=functioa() } 
onmouseenter nu 


im 


onmouseleave 


onmozfullscreenerror 


习 襄 function 
1 jQuery 
mozCancelAnimationFrame mozCancelAnimat ionFrame!) 


mozCancelRequestAnimationFrame mozCancelR=questAnimationFrame) 
习 InstallTrigger Object { SEIN-1, LOCALE-2, CONTENT-4， 更 多 ...} 


URL MozUKLProperty { coastructor-MozUKLProperty, 
createObjectURL—createObjectURL(), 
revokeObjectURL—revokeObjectURL() } 


+ applicationCache 0 iteme in o 书 ine cache 
dosed false 
局 console Object { loe=-function()， debue-function(), info=functionO， 更 
多 ... } 
constructor Window { } 
+ content Window HelioWorld. html 
习 controllers XULControllers { canstructor=XULControllers， 


QueryInterface=-Quer7Interface()， 
getControllerForCommand=-getControllerFarCommand()， 更 多 ...) 

习 crypto Crypto { constractor-Crypto, Version= 2.4 ， 
enableSmartCardBvents—false } 


图 2-15 ”使 用 Firebug 观 察 Hello World! 程 序 


开发 者 首先 可 以 下 载 和 安装 Firefox ( 其 下 载 地 址 为 : http:/www.firefox.com.cn/ )， 然 后 通 
Firefox 下 载 和 安装 Firebug 搬 件 (其 下 载 地 址 为 : http:/getfirebug.comy )。 

如 果 使 用 Google Chrome 的 开发 者 工具 或 者 下 的 开发 人 员工 具 , 开发 者 可 以 通过 快捷 键 F12 来 
打开 这 个 工具 的 界面 进行 开发 与 调试 。 


页面 与 对 十 框 


了 解 页 面 与 对 话 框 开发 技术 是 学 习 jQuery Mobile 移 动 开发 的 第 一 步 。 页 面 和 对 话 框 就 好 像 一 
个 “ 容 需 ”， 移 动 应 用 的 页 面 元 素 都 要 放 在 这 个 容 融 中 。 

在 这 一 草 ， 我 们 将 会 了 解 到 : 

口 单 页 模板 与 多 页 模板 ; 

口 页 面 标题 ; 

口 链接 到 内 部 页 面 或 外 部 页 面 ; 

口 建立 和 关闭 对 话 框 ; 

口 切换 方式 。 


3.1 单 页 模板 与 多 页 模板 


单 页 模板 和 多 页 模板 是 使 用 jQuery Mobile 开 发 页 面 和 对 话 框 时 经 常用 到 的 技术 。 基 于 jQuery 
Mobile 开 发 Web 移 动 应 用 时 ， 如 果 一 个 网 页 文件 只 包含 一 个 页 面 ， 那 使 用 的 就 是 单 页 模板 技术 ; 
而 一 个 网 页 文件 中 包含 多 个 页 面 , 并 能 够 通过 链接 在 这 个 网 页 文件 所 包含 的 各 个 页 面 间或 不 同 网 
页 文件 的 页 面 间 跳 转 ， 这 使 用 的 就 是 多 页 模板 技术 。 

形象 地 说 ， 多 页 模板 类 似 于 网 页 开发 中 的 选项 卡 。 为 了 节省 用 户 打 开 页 面 选 项 卡 的 时 间 ， 开 
发 者 会 在 HTML 页 面 中 将 选项 卡 的 内 容 从 服务 需 下 载 并 绥 存 到 浏览 锅 中 。 当 用 户 打 开 某 个 选项 卡 
时 ， 浏 览 天 将 不 再 需要 重新 到 服务 大 获得 页 面 内 容 ， 只 需 将 选项 卡 中 隐藏 的 内 容 显 示 出 来 即 可 。 

台式 机 具有 稳定 而 高 速 的 网 络 带 宽 。 相 比 之 下 ， 在 Web 移 动 应 用 中 ， 移 动 设备 使 用 2G 网 络 、 
3G 网 络 或 者 Wi-Fi 连 接 到 Web 服 务 硕 ， 网 络 通信 环境 非常 复杂 。 移 动 设备 的 网 络 传输 速率 受到 连 
接 到 移动 基站 的 速 这 、 基 站 目 壬 的 融 完 品质、 一 个 基站 所 和 履 盖 的 移动 设备 的 数量 ,以 及 移动 设备 
在 运行 过 程 中 从 一 个 移动 基站 切换 到 男 一 个 移动 基站 时 重新 建立 连接 的 影响 , 所 表现 的 网 络 品质 
很 不 稳定 , 甚至 会 出 现 网 络 切换 中 的 频繁 下 线 和 上 线 。 我们 乘坐 地 铁 时 打开 网 页 的 速度 慢 于 在 马 
路 上 等 公交 车 时 ， 其 原因 就 在 于 此 。 所 以 ，Web 移 动 应 用 就 需要 能 够 针对 多 种 复杂 的 网 络 环境 进 
行 专门 的 优化 设计 。 

在 jQuery Mobile 中 ， 多 页 模板 在 提升 页 面 的 加 载 速度 、 改 善 用 户 体验 方面 更 进一步 。 用 户 在 
下 载 第 一 个 页 面 的 时 候 ， 同 时 也 下 载 了 相关 的 其 他 页 面 。 当 用 户 打 开 这 样 的 页 面 时 ,不 再 再 要 重 
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新 从 服务 胡 下 载 新 的 页 面 ， 而 只 需要 将 “隐藏 ”在 育 后 的 页 面 呈现 出 来 就 好 了 。 这 是 多 页 模板 应 
用 的 典型 场景 。 


注意 ”在 基于 多 页 模板 的 设计 中 ,一 个 网 页 文件 中 不 同 页 面 之 间 的 切换 不 需要 再 重新 建立 连接 
和 下 载 ， 因 为 所 有 内 容 都 一 次 性 下 载 到 移动 设备 中 了 。 
一 次 下 载 多 页 模板 页 面 的 所 有 内 容 可 以 减少 网 络 传输 ， 但 是 多 页 模板 的 设计 存在 一 个 局 
限 , 那 就 是 它 不 适用 于 HTML 页 面 中 DOM 元 素 的 尺寸 过 大 或 过 于 复杂 的 场景 。 如 果 HTMEL 
页 面 中 DOM 元 素 的 尺寸 较 大 或 者 复杂 ， 移 动 设 备 浏 览 器 的 处 理 速 度 可 能 会 变 慢 。 这 就 需 
要 用 到 jQuery Mobile 的 高 级 技术 一 一 页 面 预存 和 缓存 技术 。 页 面 预存 和 缓存 技术 能 够 帮 
助 开发 者 在 网 络 连接 速度 和 DOM 解 析 效 率 之 间 获 得 平衡 ， 相 关内 容 可 参见 第 4 章 。 


第 2 章 中 所 接触 到 的 Hello World! 是 一 个 典型 的 单 页 模板 页 面 。 

多 页 模板 基于 单 页 模板 添加 新 页 面 , 并 能 够 通过 超级 链接 跳 转 到 新 的 页 面 。 基 于 单 页 模板 实 
现 多 页 模板 时 ， 大 致 需要 两 个 步骤 ， 具 体 如 下 所 示 。 

(1) 在 单 页 模板 页 面 之 后 添加 一 个 新 的 页 面部 分 。 通 常会 使 用 <section> 容 带 来 作为 各 个 页 面 


只 是 多 页 模板 中 包含 多 个 <section data-Tole="page"> 的 页 面容 器 。 
增加 “第 二 个 页 面 ” 的 代码 厂 段 如 下 : 


<section id="page second” data-role="page” data-title=" 第 二 个 页 面 "> 
<header data-role="header"> 
<h1> 第 二 个 页 面 </h1> 
</header> 
<div class="content" data-role="content"> 
点 击 这 里 ,返回 <a href="#page MultipageDemo"> 演 示 </a> 页 面 。 
</div> 
<«/section> 


(2) 在 第 一 个 页 面 中 添加 指 问 “第 二 个 页 面 ”的 超级 链接 : 

<a href="#page second"> 第 二 个 页 面 </a> 

在 图 3-1 左 图 中 点 击 “ 第 二 个 页 面 ”链接 ， 将 得 到 如 图 3-1 右 图 所 示 的 页 面 。 
jQuery Mobile 的 超级 链接 有 别 于 其 他 常见 的 Web 开 发 技术 ， 详 情 可 参阅 3.3 市 。 
经 过 整合 之 后 ， 完 整 的 多 页 模板 页 面 的 实现 代码 如 代码 清单 3-1 所 示 。 


代码 清单 3-1 多 页 模板 页 面 的 实现 代码 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name= Viewport ”content= width=device-width，jinitial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
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<script src="../js/jqvuery-1.7.1.min.js"></script> 
«script src="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"> 
</head> 
<body> 
《1-- 这 里 是 多 页 显示 的 第 一 页 --> 
《Section id="page MultiPageDemo" data-role="page"> 
<header data-role="header"> 
<h1> 多 页 面 模板 演示 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> 这 是 一 个 “多 页 面 模板 演示 ”。 <br/> 
请 点 击 下 面 的 超级 链接 ， 以 跳 转 页 面 。 《</p> 
点 击 这 里 ， 进 入 《a href="#page second"> 第 二 个 页 面 </a>。 
</div> 
<«/section> 


《1-- 这 里 是 多 页 显示 的 第 二 页 --> 
<Section id="page second” data-role="page”data-title=" 第 二 个 页 面 "> 
<header data-role="header"> 
<h1> 第 二 个 页 面 </h1> 
</header> 
<div class="content" data-role="content"> 
点 击 这 里 ， 返 回 《a href="#page MultipPageDemo" > 演示 《</a> 页 面 。 
</div> 
<«/section> 
</body> 
</html> 
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多 页 面 模板 演示 第 二 个 页 面 


点 击 这 里 ， 返 回 演示 页 面 。 
这 是 一 个 “多 页 面 模板 演示 "。 
请 点 击 下 面 的 超级 链接 ， 以 跳 转 页 面 。 


点 击 这 里 ， 进 入 第 二 个 页 面 。 


</script> 
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图 3-1 使 用 多 页 模板 在 一 个 网 页 中 包含 两 个 页 面 


3.2 页面 标题 


在 前 面 的 演示 中 ， 不 管 单 页 醒 板 还 是 多 页 模板 ， 页 面 代码 chead> 中 的 <title> 部 分 都 设置 为 
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“器 平台 移动 应 用 ”。 按照 HTML 页 面 通常 的 呈现 方式 , <title> 标 签 中 的 内 容 会 被 显示 在 浏览 带 标 
题 栏 上 。 但 是 在 jQuery Mobile 页 面 呈 现 的 时 候 , 浏览 硬 标 题 栏 上 并 不 一 定 会 显示 这 个 标题 ,， 这 是 
因为 在 jQuery Mobile 多 页 模板 页 面 中 ， 每 个 页 面 的 标题 可 能 是 不 同 的 ， 需 要 单独 设置 。 

实现 页 面 标题 时 ， 可 以 在 页 面 标签 容 带 中 设置 属性 data-title: 


《Section id="page Second” data-role="page” data-title=" 关 于 我 们 "> 


</section> 


注意 如 果 页 面容 器 中 没有 设置 data-title 属 性 ,那么 页 面 工具 栏 中 的 标题 内 容 将 会 作为 页 面 标 
题 出 现在 标题 栏 的 位 置 。 


如 采 多 页 模板 的 第 一 个 页 面 设置 有 页 眉 工具 栏 的 标题 ,而 之 后 的 页 面 没 有 设置 , 而且 也 没有 
在 页 面容 兹 中 设置 data-title 属 性 ， 则 跳 转 之 后 的 多 页 模板 页 面 会 使 用 跳 转 前 的 页 面 的 标题 。 

这 样 的 处 理 显然 容易 引起 混乱 ， 所 以 建议 开发 者 在 每 个 页 面容 带 中 设置 data-title 属 性 。 

在 页 眉 工 具 栏 中 , 不 但 会 包含 页 面 标题 , 通 第 还 可 以 包含 功能 按钮 或 者 导航 按钮 。 有 关 页 眉 
工具 栏 的 进一步 介绍 ， 请 参见 第 8 草 。 
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超级 链接 是 互联 网 应 用 中 最 核心 的 技术 之 一 , 如 果 没 有 超级 链接 , 各 个 页 面 将 不 能 连接 在 一 
起 。 同 样 ， 超 级 链接 也 是 jQuery Mobile 中 最 核心 的 技术 之 一 。 与 其 他 Web 开 发 技术 不 同 ，jQuery 
Mobile 为 超级 链接 增加 了 很 多 不 同 的 特性 并 进行 了 优化 , 这 将 能 够 在 有 限 的 网 络 带 宽 和 移动 设备 
处 理 能 力 的 约束 下 ， 很 大 程度 地 改善 移动 应 用 的 用 户 体验 。 

对 于 网 络 带 宽 不 稳定 、 移 动 设备 运算 能 力 有 限 的 使 用 场景 ,页面 刷 新 可 能 意味 着 使 用 者 漫长 
的 等 待 。 在 基于 jQuery Mobile 的 应 用 中 , 如 采 没 有 特别 声明 , 那么 超级 链接 意味 着 一 个 Ajax 地 址 ， 
而 不 是 其 他 网 页 开发 技术 中 的 超级 链接 。 

下 面 我 们 来 看 看 点 击 这 个 地 址 所 发 生 的 行为 : 

<a href="hello.html">Hello World</a> 

这 是 一 个 通过 相对 路 径 方 式 指 问 的 页 面 。 当 在 jQuery Mobile 应 用 中 点 击 这 个 页 面 时 ， 页面 并 
不 会 马上 刷新 ， 而 是 先 在 后 台 进 行 页 面 的 DOM 加 载 和 初始 化 ， 然 后 再 将 页 面 内 容 呈 现在 移动 设 
备 的 浏览 器 上 ， 这 就 是 jQuery Mobile 所 使 用 的 Ajax 技术 。 

在 其 他 的 网 页 开发 技术 中 ， 当 点 击 超级 链接 之 后 ,页 面 将 马上 跳 转 到 新 页 面 ， 并 进行 页 面 的 
刷新 。 


小 技巧 基于 jQuery Mobile 的 Ajax 技术 ， 使 用 异步 预 取 和 缓存 来 加 快 页 面 加 载 速 度 ， 使 Web 移 动 
应 用 的 操作 更 加 流畅 ， 详 情 可 参见 第 4 章 。 
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如 果 页 面 不 存在 ， 那 么 基于 Ajax 的 DOM 加 载 与 初始 化 将 失败 ， 此 时 就 会 出 现 错误 提示 。 而 
在 其 他 的 网 页 开发 技术 中 , 则 会 出 现 来 自 服务 器 的 404 页 面 找 不 到 错误 。 两 种 404 错 误 的 页 面 呈 现 
效果 如 图 3-2 所 示 。 


乡 


应 用 程序 “DEFAULT WEB 
链接 指向 一 个 不 存在 的 页 面 SITE" 中 的 服务 器 错误 


不 存在 的 页 面 


r 错 谋 摘要 
HTTP 错误 404.0 - Not Found 


您 要 找 的 资源 已 被 删除 、 已 更 名 或 暂时 
可 用 .。 


Error Loading Page 


详 组 错 误 迟 息 
楼 声 lIS Web Core 
通知 MapRequestHandler 
处 理 程序 StaticFile 
错误 代码 0x80070002 


。 损 定 的 目录 或 文 忻 在 Web 服务 器 上 不 存 
。 URL 拼写 错误 
9 鞭 个 自 定 义 筛 选 器 或 模块 [如 URLScan) 


图 3-2” jQuery Mobile 〈 左 图 ) 和 HS 服务 需 ( 右 图 ) 中 的 页 面 找 不 到 错误 


在 图 3-2 中 ， 错 误 提 示 Error Loading Page 就 是 在 DOM 加 载 和 初始 化 失败 之 后 发 出 的 。jQuery 
Mobile 所 提供 的 错误 提示 默认 是 英文 的 。 如 果 所 开发 的 应 用 需要 适用 于 不 同 的 国家 , 例如 需要 支 
持 简体 中 文 或 者 繁体 中 文 ， 则 可 以 对 默认 提示 消息 进行 国际 化 处 理 ， 详 情 可 参见 第 4 章 。 

在 jQuery Mobile 应 用 中 ， 超 级 链接 大 多 以 Ajax 方 式 进行 页 面 跳 转 ， 不 过 也 有 一 些 例外 情况 ， 
详 见 表 3-1。 


表 3-1 不 使 用 Ajax 超级 链接 的 方式 


不 使 用 Ajax 超级 链接 的 方式 含 义 
«a href= http://catchexception.net/ > 指向 另 一 个 域名 下 的 页 面 
<a href='somepage.htm' rel='external'> 设置 rel 属 性 为 external 
<a href='somepage.htm' data-ajax='false'> 通过 设置 data-ajax 属 性 为 false。 
默认 为 true， 支 持 Ajax 类 型 的 超级 链接 
<a href='somepage.htm' target= other > 在 新 窗口 中 打开 这 个 页 面 


data-ajax 是 jQuery Mobile 1.1.0 之 后 开始 文 持 的 新 属性 ， 这 个 属性 可 以 用 于 超级 链接 标签 之 
上 ， 也 可 以 用 在 超级 链接 之 外 的 DOM 容 器 上 。data-ajax 属 性 一 旦 被 设置 为 false，DOM 容 器 之 
内 的 所 有 超级 链接 都 将 不 使 用 Ajax 进 行 页 面 跳 转 ， 而 是 以 通常 所 见 的 方式 进行 页 面 跳 转 。 

如 末 这 个 蔡 用 Ajax 跳 转 的 DOM 容 机 中 存在 某 个 超级 链接 ， 并 且 这 个 超级 链接 将 data-ajax 属 
性 设置 为 true， 那 么 这 个 超级 链接 依然 可 以 以 Ajax 方式 进行 页 面 跳 转 。 
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注意 在 页 面容 器 中 使 用 data-ajax='false' 的 设置 时 ， 必 须 设置 jQuery Mobile 全 局 选项 
$.mobile.ignoreContentEnable 为 true， 否 则 页 面 之 内 的 超级 链接 将 依然 以 默认 的 Ajax 方 
式 处 理 ， 此 时 即便 将 data-ajax 属 性 设置 为 false 也 不 起 作用 。 


多 页 模板 内 部 页 面 之 间 的 超级 链接 和 用 作 单 页 模板 或 不 同 的 多 页 模板 页 面 之 间 跳 转 的 超级 
链接 略 有 不 同 。 多 页 模板 的 页 面 跳 转 是 在 一 个 网 页 文件 内 部 的 各 个 页 面 之 间 展 开 的 。 

如 采 在 多 页 模板 中 文 持 超级 链接 和 页 面 跳 转 ， 那 么 可 以 通过 这 样 的 代码 片段 实现 : 

<a href="#pageld"> 多 页 模板 中 的 页 面 </a> 

href 所 指 癌 的 地 址 不 再 是 一 个 页 面 ， 而 是 多 页 模板 中 希望 跳 转 到 的 目的 页 面 的 DOM 容 剖 id， 
并 且 需 要 在 DOM 容 天 id 前 面 标记 # 符 号 。 这 种 超级 链接 的 形式 非常 类 似 于 命名 锁 记 。 


小 技巧 在 多 页 模板 中 ， 通 过 #pageId 的 形式 来 跳 转 到 某 个 页 面 ， 不 需要 重新 加 载 和 刷新 页 面 ， 
的 确 可 以 改善 用 户 页 面 ， 随 之 而 来 的 一 个 问题 是 ,命名 锚 记 应 该 如 何 处 理 ? 在 HTML 
语言 规范 中 ， 命 名 锚 记 也 是 使 用 # 符 号 来 标记 的 。 
关于 jQuery Mobile 应 用 中 使 用 命名 锚 记 的 方法 ， 请 参见 第 4 章 。 


在 多 页 模板 中 使 用 超级 链接 还 有 一 个 需要 注意 的 地 方 , 那 就 是 通过 超级 链接 跳 转 到 某 个 多 页 
模板 文件 时 , 默认 是 进入 到 第 一 个 页 面 的 。 如果 希望 所 跳 转 到 的 页 面 是 多 页 模板 中 第 二 个 或 者 以 
后 的 页 面 ， 则 可 以 使 用 这 样 的 代码 片段 实现 : 

<a href="MultiPage.html#secondPageDOMId"> 多 页 模板 中 的 第 二 个 页 面 </a> 

特别 需要 注意 的 是 , 使 用 这 个 技巧 从 其 他 网 页 文件 跳 转 到 多 页 模板 中 某 个 指定 页 面 时 , 多 页 
模板 的 页 面 id 一 定 要 书写 正确 。 如 采写 错 了 ， 将 可 能 看 不 到 错误 提示 ， 从 而 造成 Web 移 动 应 用 使 
用 者 的 困惑 ， 也 将 造成 开发 者 难以 定位 和 诊断 问题 所 在 。 

在 HTML 网 页 开发 中 ,往往 有 这 样 的 场景 : 在 HTTP 服 务 顺 中 设置 知 干 默认 的 页 面 文件 名 ， 
如 果 使 用 者 浏览 某 个 目录 时 没有 输入 确定 的 文件 名 ,此 时 会 自动 打开 这 些 默 认 文档 , 例如, 在 IIS 
中 设置 这 些 为 默认 文档 ， 如 图 3-3 所 示 。 


@ HAE 

使 用 此 功能 指定 当 客户 涝 未 请 求 特定 文件 名 时 返回 的 默认 文件 。 按 优先 级 顺序 设置 默认 文档 。 
名 称 

Default.htm 

Default.asp 

index.htm 


index.html 


lisstart.htm 


default.aspx 


图 3-3” IIS 默认 文档 
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当 用 户 点 击 指 回 某 个 UREL 目 录 的 超级 链接 时 ， 例 如 

<a href='http://catchexception.net/about/' >..</a> 

HTTP 服 务 人 将 会 检查 目录 中 是 否 存在 默认 文档 ， 如 来 存在 ,就 将 默认 文档 的 内 容 发 送 到 浏 
喉 胡 。 对 于 jQuery Mobile 程 序 ， 如 果 包 含有 打开 目录 URL 地 址 的 场景 ,开发 者 需要 特别 留意 ， 
定 要 在 目录 地 址 的 最 后 添加 斜 线 /， 以 表示 这 是 目录 而 非 文件 。 和 否则 ，jQuery Mobile 将 可 能 通过 
Ajax 的 方式 答 试 打开 这 个 URL， 从 而 出 现 错误 。 


3.4 建立 和 天 闭 对 话 框 


对 话 框 可 以 看 成 一 种 特别 的 页 面 样式 , 能 够 显示 与 页 面 一 样 的 内 容 。 有 别 于 页 面 ， 对 话 框 不 
再 以 全 屏 方 式 呈 现 内 容 ， 而 是 在 有 限 的 范围 内 呈现 相关 的 内 容 。 图 3-4 分 别 以 页 面 的 形式 和 对 话 
框 的 形式 显示 了 内 容 和 功能 大 致 相同 的 两 个 界面 。 
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第 二 个 页 面 


X 对 话 框 
点 击 这 里 ， 人 运 回 演示 页 面 。 


点 击 返 回 ， 回 到 上 一 个 页 面 。 


返回 


图 3-4 页面 ( 左 图 ) 和 对 话 框 ( 右 图 ) 


下 面 继续 以 之 前 的 多 页 模板 为 例 进行 介绍 。 实 现 对 话 框 效果 很 简单 ， 只 需 将 多 页 模板 中 第 二 
个 页 面 的 section 容 妖 的 data-role 属 性 值 从 page 改 为 dialog 妈 可 。 

为 了 更 加 接近 真实 的 对 话 框 样式 ， 将 之 前 例子 中 的 “返回 ”链接 调整 为 按钮 样式 。 在 这 里 ， 
按钮 样式 的 实现 只 需要 在 原 有 <a> 超 级 链接 标签 中 加 入 data-role="button" 即 可 。 关 于 按钮 的 使 
用 ， 可 参见 第 7 章 。 

基于 HIML 超 级 链接 打开 对 话 框 和 打开 页 面 的 方法 基本 一 样 , 不 同 在 于 页 面 设置 上 ， 对 话 框 
页 面 的 data-role 属 性 被 设置 为 dialog。 

调整 后 的 对 话 框 的 代码 如 代码 清单 3-2 所 示 。 因 为 两 种 界面 的 霹 境 不 同 ， 我 们 在 显示 文字 上 
稍微 进行 了 一 点 调整 。 


3.4 ”建立 和 关闭 对 话 框 31 
代码 清单 3-2 ”从 对 话 框 关闭 与 返回 之 前 的 页 面 


<section id="page second" data-role="dialog"> 
<header data-role="header"> 
《<h1> 对 话 框 </h1> 
</header> 
<div class="content" data-role="content"> 
点 击 返 回 ， 回 到 上 一 个 页 面 。 
<br/> 


<a href="PageTransition.html" data-role="button" data-theme="b" data-rel="back"> 
返回 
</a> 


<¢a href="#" data-role="button" data-theme="b" onClick="jquery('page second').dialog('close' )"> 
关闭 </a> 


</div> 
</section> 


如 果 要 关闭 对 话 框 ， 既 可 以 使 用 jQuery 选择 带 实 现 ， 也 可 以 直接 点 击 对 话 框 左上 方 的 图 标号 
来 实现 。 

通过 程序 关闭 对 话 框 的 代码 如 下 : 

$(' .ui-dialog').dialog('close'); 

在 对 话 框 的 方法 中 , 只 有 关闭 方法 而 没有 打开 方法 。 如果 要 通 CA 
框 , 通常 需要 创建 一 个 超级 链接 , 并 通过 设置 CSS 样 式 为 display:none 使 得 这 个 超级 链接 不 可 见 ， 
然后 通过 程序 模拟 点 击 这 个 超级 链接 实现 。 

下 面 的 代码 将 一 个 不 可 见 的 超级 链接 指 癌 对 话 框 #page_second 上 : 


<a id='lnkDialog' href="#page second" data-rel="dialog" data-transition="pop" 
style='display:none; '></a> 


当 通 过 下 面 的 JavaScript 程 序 触发 这 个 超级 链接 时 ， 则 会 打开 对 话 框 : 
$("#page second").click(); 


注意 jQuery Mobile 提 供 页 面 跳 转 的 方法 $.mobile.changePage() 通 常 只 用 于 页 面 操作 而 不 可 以 
直接 用 于 打开 对 话 框 。 如 果 想 使 用 这 个 方法 打开 对 话 框 ， 则 需要 添加 针对 对 话 框 的 参数 
Tole: 'dialog' ， 示 例 代 码 如 下 : 


$.mobile.changePpage('#page second, {transition: 'pop', role: 'dialog'}); 


在 页 面 和 对 话 杠 中 ， 可 以 通过 在 超级 链接 按钮 上 设置 data-rel 属 性 为 back 而 实现 页 面 的 “后 
退 ” 功 能 


<a href="PageTransition.html" data-role="button" data-ITel= back > 
注意 ”在 实际 开发 过 程 中 ， 建 议 开发 者 最 好 能 够 在 设置 data-rel="back" 之 外 ,依然 设置 href 属 


性 值 为 上 一 个 页 面 的 地 址 。 这 是 由 于 如 果 移 动 设备 浏览 器 不 能 很 好 地 支持 data-rel 属 性 ， 
至 少 可 以 跳 转 到 超级 链接 的 href 所 指向 的 页 面 。 
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3.5 切换 万 去 

不 管 是 页 面 还 是 对 话 框 ， 在 呈现 的 时 候 都 可 以 设 定 其 切换 方式 ， 以 改善 用 户 体 验 , 这 可 以 通 
过 在 链接 中 声明 data-transition 属 性 为 期 望 的 切换 方式 来 实现 。 

实现 页 面 切换 的 代码 如 下 : 

<a href="#page second"” data-transition="slideup"> 自 下 向 上 切换 页 面 </a> 


当前 ，jQuery Mobile 支 持 的 页 面 切换 方式 包括 10 种 ， 如 表 3-2 所 示 。 
表 3-2 页面 切 换 方 式 


切换 方式 data-transition 属 性 值 
横 疝 幻灯 方式 slide 
目 上 问 下 约 灯 方式 slideup 
目下 同上 幻灯 方式 slidedown 
中 央 弹 出 pop 
淡 入 淡出 fade 
旋转 弹出 flip 
横 加 翻转 turn 
缩小 并 以 幻灯 方式 切换 flow 
淡出 方式 显示 ， 横 癌 幻 灯 方 式 退 出 slidefade 
无 动画 效果 none 


注意 ”旋转 弹出 等 一 些 效 果 在 Android 蛙 期 版 本 中 支持 得 不 是 很 好 。 旋 转 弹 出 特效 需要 移动 设备 
浏览 器 能 够 支持 3D CSS， 但 是 早期 Android 操 作 系 统 并 不 支持 这 些 。 
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使 用 jQuery Mobile 开 发 的 Web 移 动 应 用 与 传统 网 页 的 使 用 场景 不 尽 相 同 。 移 动 网 络 可 能 不 够 
稳定 ， 移 动 设 备 浏 览 硕 处 理 网 页 的 速度 比 PC 更 慢 ， 所 以 在 进行 Web 移 动 应 用 开发 时 ，JavaScript 
的 实现 方式 也 不 同 于 传统 的 网 页 程序 。 这 些 区 别 很 多 是 源 于 性 能 的 考虑 , 在 开发 时 需要 格外 留心 。 

在 这 一 章 中 ， 我 们 将 会 了 解 到 : 

口 初始 化 事件 啊 应 ; 

口 通过 预 取 和 缓存 改善 用 户 体验 ; 

口 命名 销 记 的 实现 ; 

口 通过 JavaScript 或 HTML5 Web Storage 实 现 页 面 间 的 参数 传递 

口 页 面 加 载 消 息 ; 

口 离线 应 用 。 


4.1 初始 化 


在 基于 jQuery 所 开发 的 应 用 中 , 页 面 初始 化 是 指 页 面 下 载 完 成 .DOM 对 和 象 被 加 载 到 浏览 需 之 
后 触发 的 初始 化 事件 ， 这 个 初始 化 操作 是 通过 $(document) .ready() 事 件 实 现 的 。 

初始 化 HTML 文档 与 初始 化 革 个 特定 的 jQuery Mobile 页 面 是 有 区 别 的 。 因 为 在 多 页 模板 的 页 
面 中 ， 一 个 网 页 文件 可 能 包含 了 多 个 不 同 的 页 面 ， 所 以 基于 jQuery Mobile 的 Web 应 用 的 初始 化 事 
件 比 单纯 的 基于 jQuery 的 Web 应 用 更 加 丰 军 。 

以 一 个 包含 多 个 页 面 的 多 页 模板 为 例 ，$(document) .ready() 事 件 会 在 所 有 DOM 对 和 象 加 载 完 
成 后 触发 ， 整 个 HTML 了 网 页 文件 只 触发 一 次 ， 而 不 管 它 是 否 为 多 页 模板 。 在 实际 的 应 用 中 ， 往 往 
需要 针对 多 页 模板 中 的 不 同 页 面 执 行 不 同 页 面 级 别 的 初始 化 。 当 第 一 次 呈现 每 个 页 面 时 ， 都 将 执 
行 一 次 pageinit 初 始 化 事件 。 

此 外 ， 在 启动 jQuery Mobile 的 时 候 , 会 触发 mobileinit 事 件 。 在 jQuery Mobile 中 ， 这 3 种 初始 
化 事件 是 有 所 区 别 的 ， 具 体 如 表 4-1 所 示 。 

表 4-1 jQuery Mobile 初 始 化 事件 
事 件 合 义 
mobileinit 启动 jQuery Mobile 时 触发 此 事件 


( 续 ) 
事 件 含义 
$(document).ready() HTML 页 面 DOM 对 象 加 载 完 成 时 触发 此 事件 
pageinit 初始 化 完成 某 个 页 面 时 ， 触 发 此 事件 
这 些 初始 化 事件 的 触发 顺序 如 下 所 示 。 
(1) 首先 触发 nobileinit。 


(2) 然后 触发 $(document).ready()。 

(3) 每 当 第 一 次 打开 某 个 页 面 时 , 均 触 发 pageinit 事 件 。 打 开 第 一 个 页 面 时 ,会 触发 其 pageinit 
事件 。 当 跳 转 到 第 二 个 页 面 时 ， 会 触发 第 二 个 页 面 的 pageinit 事 件 。 

需要 注意 的 是 ，mobileinit、$(document).ready() 和 pageinit 只 能 触发 一 次 。 如 果 从 当前 
HTML 文 件 的 男 一 个 页 面 模 板 跳 转 回 之 前 已 经 访问 过 的 页 面 ， 则 不 会 重复 触发 初始 化 事件 。 

如 有 果 希 望 每 次 呈现 页 面 时 都 能 够 触发 初始 化 事件 ， 则 可 以 将 这 样 的 函数 绑 定 到 pageshow 事 
件 。 或 者 ， 可 以 使 用 trigger() 函 数 触发 特定 的 事件 。 例 如 ， 

<a href="#”onClick="$(document) .trigger('mobileinit')"> 手 动 触发 mobileinit 事 件 </ay> 

就 能 够 实现 多 次 触发 初始 化 事件 的 目的 。 

除了 上 面 介绍 的 3 个 事件 外 ， 还 有 onload 事 件 。 当 所 有 相关 内 容 ( 包括 图 片 ) 加 载 完 成 时 ， 
会 触发 onlo0ad 事 件 。 因 为 受到 图 片 等 内 容 的 影响，onload 事 件 的 触发 时 间 比 较 晚 。 虽 然 在 页 面 开 
发 中 也 会 用 到 onload 事 件 ， 但 在 jQuery Mobile 开 发 中 ， 主 要 使 用 的 是 mobileinit 、 
$(document) .ready() 和 pageinit 这 3 种 初始 化 事件 。 

代码 清单 4-1 演 示 了 mobileinit、$(document) .ready() 和 pageinit 这 3 种 事件 的 绑 定 方式 。 在 
执行 过 程 中 ， 将 分 别 触发 不 同 的 事件 函数 。 


代码 清单 4-1 事件 触发 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script> 
$(document).ready(function(e) { 
alert("document.ready 被 触发 。"); 


$(document).live("mobileinit", function () { 
alert('mobileinit 事 件 被 执行 ' ) ; 


}); 
$(document).delegate("#page MobileInit0o", "pageinit", function(){ 
alert('page MobileInit0 页 面 的 pageinit 初 始 化 被 执行 ');} 


$(document).delegate("#page MobileInit0", "pageshow", function(){ 
alert('page MobileInit0 页 面 的 pageshow 初 始 化 被 执行 ' ) ; 
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}); 
$(document).delegate("#page MobileInit1", "pageinit", function(){ 
alert('page MobileInit1 页 面 的 pageinit 初 始 化 被 执行 ');} 
}); 
</script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page MobileInit0o" data-role="page"> 
<header data-role="header"> 
<h1> 页 面 事件 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> jQuery Mobile 页 面 初 始 化 是 通过 mobileinit、$(document).ready() 以 及 pageinit 实 现 的 <br /> 
<a href="#" onClick="$(document).trigger('mobileinit')"> 手 动 触 发 nobileinit 事 件 </a><br /> 4 
进入 <a href="#page MobileIlnit1"> 下 一 页 </a><br /></p> 
</div> 
</section> 


<Section id="page MobileInit1" data-role="page"> 
<header data-role="header"> 
<h1> 页 面 事件 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> jQuery Mobile 页 面 初 始 化 是 通过 pageinit 实 现 的 <br /> 
<a href="#page MobileInit0"> 返 回 </a></p> 
</div> 
</Sectiony> 
</body> 
</html> 


按照 顺序 ,分别 呈现 如 下 消息 。 
(1) 启动 jQuery Mobile， 触 发 mnobileinit 事 件 ， 如 图 4-1 所 示 。 


mobileinit 事 件 被 执行 


OK 


图 4-1 ”触发 nobileinit 事 件 
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(2) DOM 对 象 加 载 完 成 ，$(document ) .ready() 被 触发 ， 如 图 4-2 所 示 。 


Stdocument).ready 必 被 触发 。 


站 上 改 


图 4-2 $(document).ready() 被 触发 
(3) 第 一 个 页 面 的 pageinit 事 件 被 触发 ， 如 图 4-3 所 示 。 


page_Mobilelnit0 页 面 
的 pageinit 初 始 化 被 执行 


DK 


图 4-3 ”pageinit 事 件 被 触发 
(4) 页 面 中 的 pageshow 事 件 被 触发 ， 如 图 4-4 所 示 。 
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page_Mobilelnit0 页 面 
的 pageshow 事 件 被 执行 


OK 


图 4-4 pageshow 事 件 被 触发 


(5) 进入 第 二 个 页 面 后 ， 执 行 第 二 个 页 面 的 pageinit 事 件 ， 如 图 4-5 所 示 。 


page_Mobilelnit1 页 面 
的 pageinit 初 始 化 被 执行 


PP 
国民 


图 4-5”pageinit 事 件 被 触发 (第 二 个 页 面 ) 
(6) 从 第 二 个 页 面 返回 第 一 个 页 面 。 因 为 第 一 个 页 面 在 之 前 已 经 执行 过 pageinit 初 始 化 ， 所 
以 这 个 页 面 的 pageinit 初 始 化 不 会 被 重复 触发 。 当 页 面 被 呈现 的 时 候 ， 这 个 页 面 的 pageshow 事 件 
被 触发 ， 如 图 4-6 所 示 。 
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page_Mobilelnit0 页 面 
的 pageshow 事 件 被 执行 


DK 


图 4-6 ”pageshow 事 件 被 触发 (第 二 个 页 面 ) 


对 于 已 经 执行 完 mobileinit 或 者 pageinit 初 始 化 事件 的 页 面 而 言 ， 初 始 化 事件 不 可 以 重复 执 
行 ， 但 是 可 以 通过 执行 $(document).trigger() 也 数 再 次 触发 特定 的 初始 化 事件 。 
图 4-7 展 现 了 通过 $(document) .trigger( "mobileinit ') 触 发 mobileinit 事 件 的 场景 。 


mobileinit 事 件 被 执行 


OK 


图 4-7 ”通过 trigger() 困 数 再 次 触发 mobileinit 事 件 
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4.2 ”通过 预 取 和 缓存 改善 页 面 访问 速度 


使 用 单 页 模板 时 , 页 面 在 加 载 之 后 卫 接 被 呈现 出 来 , 当 从 一 个 页 面 跳 转 到 下 一 个 页 面 的 时 候 ， 
就 需要 重新 到 服务 仙 请 求 新 的 页 面 内 容 , 因此 单 页 模板 在 页 面 跳 转 的 时 候 , 用 户 会 感到 页 面 略 有 
停顿 。 使 用 多 页 模板 ， 可 以 改善 页 面 跳 转 之 间 的 流畅 性 , 但 是 多 个 页 面 要 一 次 性 下 载 ， 所 以 下 载 
时 间 变 长 ， 用 户 体验 也 会 受到 影响 。 

如 条 能 够 有 一 种 实现 方式 ,， 既 可 以 实现 页 面 快速 下 载 和 呈现 , 也 可 以 保证 页 面 跳 转 和 切换 过 
程 的 流畅 性 ， 那 将 可 以 带 来 更 好 的 用 户 体验 ， 而 预 取 (prefetch ) 技术 就 可 以 帮助 开发 者 实现 这 
样 的 目的 。 

在 基于 预 取 技术 开发 的 应 用 中 ， 当 第 一 个 页 面 的 DOM 对 象 加 载 完 成 之 后 ，jQuery Mobile 会 
对 标记 data-prefetch 的 链接 地 址 进行 预 取 操 作 。 预 取 操 作 的 详细 过 程 是 ， 在 用 户 浏览 一 个 页 面 
的 时 候 , 训 览 硕 开 始 下 载 和 缓存 标记 为 预 取 的 页 面 ， 并 将 预 取 所 指 回 的 页 面 内 容 缓存 到 DOM 中 。 
这 样 当 页 面 跳 转 到 预 取 页 面 的 时 候 ， 因 为 预 取 页 面 的 内 容 已 经 加 载 到 DOM 中 ， 就 可 以 下 接 呈 现 
出 DOM 绥 存 的 页 面 内容 。 通 过 使 用 预 取 技术 ， 第 一 个 页 面 的 呈现 速度 以 及 到 后 续 页 面 的 跳 转速 
上 度 会 比 单 页 模板 更 快 ， 而 下 载 和 呈现 第 一 个 页 面 的 速度 将 比 打开 和 呈现 一 个 多 页 模板 网 页 更 快 。 
另外 ， 经 过 预 取 技 术 优化 的 页 面 跳 转 也 更 少 被 阻塞 ， 用 户 体验 更 加 流畅 。 

标记 预 取 的 链接 地 址 样式 如 下 所 示 : 

<a href="Prefetchpage.html”data-prefetch> 跳 转 到 Prefetch 页 面 </a> 

当 页 面 的 'pagecreate 事 件 触 发 之 后 ，jQuery Mobile 会 自动 下 载 这 些 预 取 链接 所 指向 的 页 面 的 
内 容 ， 并 将 其 加 载 到 DOM 中 。 

当 页 面 跳 转 到 预 取 页 面 时 ,如 采 内 容 已 经 预 取 完成 , 那么 在 页 面 跳 转 过 程 中 将 不 再 显示 加 载 
消息 。 这 与 多 页 模板 的 用 户 体 验 非常 类 似 , 页 面 直 接 从 前 一 个 页 面 跳 转 到 下 一 个 页 面 ， 中间 不 会 
呈现 加 载 消 且 。 这 是 因为 在 预 取 操 作 执 行 的 过 程 中 ， 预 取 链 接 所 指 问 的 页 面 的 DOM 已 经 被 加 载 
到 当前 页 面 的 DOM 中 。 既 然 DOM 都 已 经 加 载 完成 了 ， 那 么 页 面 跳 转 目 然 顺 畅 地 跳 转 到 后 一 个 页 
面 了 。 

这 个 预 取 特性 比较 适用 于 页 面 内 容 连续 而 各 个 页 面 加 载 内 容 比 较 多 的 场景 , 比如 具有 分 页 设 
计 的 新 闻 、 小 说 、 相 册 或 者 4] 灯 。 在 阅读 新 闻 时 ， 当 读者 阅读 第 一 页 的 时 候 ，jQuery Mobile 预 取 
下 一 页 内 容 。 当 用 户 点 击 “ 下 一 页 ”链接 时 ， 这 个 页 面 的 内 容 已 经 在 后 侣 加载 完成 ， 几 乎 不 需要 
等 符 瓯 可 以 特 接 跳 抱 到 下 一 页 。 


小 经 验 使 用 预 取 功能 时 ， 不 建议 给 所 有 链接 都 添加 data-prefetch 属性 ， 因 为 过 多 的 
data-pirefetch 属 性 将 会 导致 移动 设备 需要 预 取 的 页 面 数量 过 多 ， 加 载 的 DOM 对 象 过 
大 。 过 大 的 DOM 对 象 将 可 能 会 消耗 大 量 手 机 内 存 ， 从 而 导致 一 些 移动 设备 浏览 器 运行 


缓慢 9 其 至 崩 溃 O 
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为 了 有 效 省 移动 设备 浏览 可 的 内 存 资源 , 对 于 没有 标记 为 缓存 的 页 面 , 在 访问 到 下 一 个 页 
面 或 者 被 预 取 的 页 面 时 ， 前 一 个 页 面 的 DOM 对 和 象 会 被 清理 掉 。 也 就 是 说 ， 假 如 用 户 从 第 一 个 页 
面 跳 转 到 下 一 个 经 过 预 取 的 页 面 , 再 重新 返回 第 一 个 页 面 时 ,第 一 个 页 面 的 内 容 已 经 被 训 览 厅 清 
理 挥 了 ， 知 要 从 服务 带 重 新 下 载 。 

如 琳 依 然 希 望 之 前 的 页 面 能 够 缓存 在 浏览 中 ,而 不 被 清理 挥 ,可 以 在 相应 的 DOM 对 象 上 标记 
data-dom-cache="true" ， 例 如 <div data-role="page" id="CachePage" data-dom-cache="true">..</div>。 

这 里 的 DOM 对 象 清理 对 于 多 页 模板 是 无 效 的 ， 只 是 会 对 通过 Ajax 方式 进行 的 页 面 预 取 操作 
产生 影响 。 对 于 多 页 模板 ， 通 秆 不 需要 设置 缓 仓 或 者 预 取 ,因为 多 页 模板 的 所 有 内 容 在 下 载 之 后 
就 全 部 加 载 到 了 浏览 需 DOM 中 。 


小 经 验 除了 通过 标记 data-dom-cache 属 性 为 true 来 缓存 页 面 外 ， 开 发 者 还 可 以 通过 使 用 
HTMLS 的 离线 应 用 功能 将 页 面 内 容 缓 存在 本 地 。 经 过 离线 应 用 处 理 的 页 面 ， 不 但 加 
载 速 度 更 快 ， 甚 至 在 移动 网 络 不 稳定 的 环境 下 也 可 以 进行 页 面 操作 ， 详情 可 参考 
4.6 节 。 


代码 清单 4-2 滨 示 了 包含 预 取 链 接 的 单 页 模板 ， 其 中 声明 了 缓存 ， 这 样 当 从 下 一 个 页 面 返回 
到 这 个 页 面 的 时 候 ， 页 面 内 容 被 从 DOM 对 象 直 接 加 载 而 不 需要 重新 从 服务 需 下 载 。 


代码 清单 4-2 包含 预 取 链接 的 单 页 模板 页 面 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="GBK"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<div id="page PageTransition" data-role="page" data-dom-cache="true"> 
<header data-role="header"> 
<h1> 预 取 页 面 处 理 /h1> 
</header> 
<div class="content" data-role="content"> 
<p> 这 段 演 示 将 呈现 采用 与 不 采用 预 取 技术 的 两 种 页 面 切换 方式 。</p> 
<a href="PrefetchPage01.html”data-prefetch> 采 用 预 取 技 术 的 页 面 </a><br /> 
<a href="PrefetchPage02.html”rel="external”> 传 统 的 页 面 跳 转 实 现 </a></div> 
</div> 
</body> 
</html> 


代码 清单 4-3 演 示 了 被 预 取 链 接 所 指向 的 页 面 代码 示例 。 
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代码 清单 4-3 ” 预 取 链 接 所 指 同 的 页 面 代 码 示例 


<section id= “page PageTransition2" data-role="page'"> 
<header data-role="header"> 
<h1> 页 面 跳 转 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> 跳 转 到 经 过 预 取 的 页 面 </p> 
</div> 
</section> 


代码 清单 4-3 并 不 是 代码 片段 ， 而 是 一 个 完整 的 预 取 页 面 内 容 。 这 个 预 取 链接 所 指向 的 页 面 
缺少 了 很 多 传统 HTML 页面 开发 中 所 必需 的 元 系 ， 例 如 jQuery 库 、jQuery Mobile 库 和 CSS 文 件 、 
head 和 body 标 签 等 。 正 因为 如 此 ， 预 取 链 接 所 指 癌 的 页 面 内 容 更 加 精简 ， 尺 寸 更 小 ， 下 载 与 加 载 

图 4-8 是 经 过 前 一 页 面 跳 转 进入 的 预 取 页 面 。 


| | 学 臣 .| 旨 吕 . 1.1UU STM 芝 导 EL 性 


页 面 跳 转 


中 转 到 经 过 预 取 的 页 面 


图 4-8” 跳 转 到 预 取 页 面 


值得 注意 的 是 , 预 取 页 面 不 可 以 直接 打开 。 如 果 直 接 打 开 预 取 页 面 ， 页面 会 由 于 没有 经 过 处 
理 而 呈现 异 第 ,示例 网 如 岁 4-9 所 示 。 此 时 既 不 会 加 载 jQuery 和 jQuery Mobile 的 JavaScript 库 与 CSS ， 
也 不 会 加 载 jQuery Mobile 所 定义 的 主题 样式 和 色 版 。 由 于 页 面 缺 少 字 符 集 的 定义 ， 中 文 呈 现 为 乱 
人 码 。 由 于 缺少 对 meta 标 签 中 viewport 属 性 的 定义 ， 页 面 显 示 比 例 很 小 以 至 于 难以 阅读 。 这 样 的 场 
景 是 开发 者 要 特别 注意 的 。 


$ 
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图 4-9 直接 打开 预 取 页 面 时 ， 内 容 和 版 式 出 现 混 乱 
如 朱 将 前 面 的 预 取 页 面 改 为 单 页 醒 板 方式 ， 则 会 是 代码 清单 4-4 所 示 的 结构 。 
代码 清单 4-4 未 采用 预 取 设 计 的 页 面 代码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page PageTransition2" data-role="page'"> 
<header data-role="header"> 
<h1> 页 面 跳 转 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> 跳 转 到 传统 的 jQuery Mobile 页 面 </p> 
</div> 
</section> 
</body> 
</html> 


运行 上 述 人 代码， 得 到 的 运行 结果 如 图 4-10 所 示 。 

这 个 单 页 模板 页 面 中 包含 有 完整 的 HTML5 页 面 信 息 ， 包 括 head 标 签 、body 标 签 、jQuery 与 
jQuery Mobile 库 所 需 的 JavaScript 和 CSS 等 相关 文件 。 而 之 前 ， 由 预 取 链接 所 指向 的 页 面 统统 没有 
这 些 内 容 。 
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页 面 跳 转 


踪 转 到 情 统 的 jQuery Mobile 页 面 


图 4-10” 跳 转 到 传统 页 面 


此 外 ， 由 于 这 个 页 面包 含 完 整 的 jQuery 和 jQuery Mobile 库 、CSS、 完 整 的 HTML 代 码 结构 ， 
所 以 可 以 直接 被 浏览 需 打 开 ， 而 且 不 会 出 现 异 名。 

不 论 这 个 单 页 模板 页 面 是 由 前 一 个 页 面 跳 转 过 来 还 是 直接 打 开 的 , 所 呈现 的 效果 都 是 一 致 
的 。 这 样 的 页 面 由 于 需要 加 载 JavaScript 库 以 及 CSS 文 件 ， 比 经 过 预 取 设 计 的 页 面 的 打开 速度 慢 
二 上 6 
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在 HTML 语 法 中 , 命名 锚 记 用 于 标记 页 面 中 的 特定 位 置 。 当 点 击 指 回 命名 锚 记 的 超级 链接 时 ， 
页 面 将 跳 转 到 命名 锚 记 的 位 置 。 命 名 销 记 使 用 标签 <a name="anchor"> 命 名 锚 记 </a> 的 形式 来 设 
置 ， 可 以 使 用 ca href="#anchor"> 连 接 到 锚 </a> 的 形式 将 链接 地 址 指 问 命名 销 记 。 

默认 情况 下 ，jQuery Mobile 自 动 通过 Ajax 方 式 处 理 链接 点 击 请 求 ， 而 HTML 语 法 定义 的 命名 
锚 记 在 jQuery Mobile 不 可 以 直接 使 用 ， 示 例 代 码 如 代码 清单 4-5 所 示 。 如 果 没 有 对 命名 销 记 进行 
特定 人 处理 ， 则 点 击 包 含有 命名 销 记 的 链接 后 ,不 会 出 现任 何 跳 转 。 我 们 可 以 使 用 一 些 变通 方式 来 
实现 HTML 中 链接 地 址 销 的 使 用 。 


代码 清单 4-5 HTML 语法 定义 的 命名 锚 记 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
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<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
《Section id="page Anchor01" data-role="page"> 
<header data-role="header"> 
<h1> 命 名 锚 记 《/h1> 
</header> 
<div class="content" data-role="content"> 
<p><a href="#anchor"> 点 击 这 里 </a>， 移 动 到 Hello Anchor 命 名 锚 记 上 。</p> 


<br/> 
<br/> 
此 处 省 略 页 面 中 的 一 些 文字 和 内 容 。 如 果 填 充 大 量 文 字 ， 链接 和 命名 锚 记 不 在 同一 屏 中 ， 则 可 以 看 到 
点 击 效果 。 
<br/> 


<div style="height:500px;"></div> 
<p><a name="anchor" id="anchor">Hello Anchor</a></p> 
</div> 
</section> 
</body> 
</html> 


运行 上 述 代码 ， 得 到 的 结果 如 图 4-11 所 示 。 


褒 名 销 记 


点 击 这 里 ,入 动 到 Hello Anchaor 名 名 镭 记 


此 处 省 略 页 面 中 的 一 些 文 字 和 内 容 。 如 果 
填充 太 量 文字 ， 和 链接 和 病名 锁 记 趟 在 同一 
屏 中 ， 则 可 以 看 到 点 击 效果 。 


图 4-11 包含 命名 锚 记 的 页 面 ， 但 是 命名 锚 记 已 不 能 
设置 ajaxLinksEnabled(false)， 可 以 禁用 jQuery Mobile 的 Ajax 和 特性， 正常 使 用 命名 销 记 。 但 
是 一 般 我 们 不 建议 这 样 做 , 这 会 由 于 使 用 Ajax 特 性 而 造成 异 浓 ,并 且 多 页 模板 中 各 个 页 面 之 间 的 
跳 转 或 者 预 取 页 面 的 页 面 间 的 跳 转 也 会 出 现 异 常 。 
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4.3.1 在 单 页 模板 中 实现 命名 锚 记 


在 单 页 模板 中 实现 命名 锚 记 的 一 种 方式 是 ， 通 过 捕获 click 或 vclick 事 件 以 JavaScript 困 数 解 
析 用 户 操作 行为 ,模拟 实 现 命 名 销 记 的 跳 转 。 人 简单 地 说 ， 这 并 不 是 真正 实现 命名 锚 记 ， 而 是 模拟 
实现 命名 销 记 的 效果 。 

既然 jQuery Mobile 中 不 能 直接 使 用 命名 锚 记 ， 就 研究 一 下 是 否 存在 其 他 变通 实现 的 可 能 。 在 
这 样 的 变通 实现 中 ， 首 先 需要 在 指 回 命名 销 记 的 超级 链接 中 绑 定 click 和 vclick 事 件 处 理 晒 数 。 
指 回 命 名 锚 记 的 链接 也 需要 标记 有 特定 CSS 定 义 ， 例 如 class='scrol1l' 。 被 指 回 的 命名 销 记 不 再 
通过 <a name="anchor">..</a> 的 形式 标记 ， 因 为 click 和 vclick 的 事件 处 理 函 数 所 定位 的 命名 销 记 
地 址 可 以 指 癌 特定 的 DOM id 所 在 的 位 置 ， 而 不 再 是 命名 锚 记 的 位 置 。 当 点 击 特定 的 链接 时 ， 会 
触发 click 或 vclick 事 件 处 理 函 数 , 这 些 事件 处 理 函 数 会 通过 silentScroll() 方 法 滚动 至 命名 锚 记 
的 位 置 。 

这 个 实现 是 一 个 变通 的 方法 ， 看 起 来 有 点 抽象 。 在 这 个 实现 中 ， 既 实现 了 命名 销 记 的 功能 ， 
又 保证 了 兼 容 于 jQuery Mobile 的 Ajax 页 面 链 接 可 以 正常 运 行 。 代 码 清 单 4-6 展 示 了 使 用 
silentScrol1() 方 法 模拟 命名 销 记 功能 的 JavaScript 脚 本 。 


代码 清单 4-6” 绑 定 click 和 vclick 事 件 ， 以 处 理 单 页 模板 命名 销 记 


<script type="text/javascript"> 
$(document).ready(function( ){ 
$('a.scroll').bind('click vclick', function(ev) { 
var target = $($(this).attr('href')).get(0).offsetTop; 
$.mobile.silentScroll(target); 
return false; 
}); 
}); 


</script> 

在 上 述 代码 中 ， 我 们 在 标记 为 class="scroll" 的 超级 链接 标签 ca> 上 绑 定 click 和 vclick 事 
件 。 点 击 超级 链接 标签 ca class="scrol1">..</a>， 就 会 触发 事件 绑 定 函数 。 在 函数 内 部 ,解析 
超级 链接 地 址 , 找到 href 属 性 的 内 容 。 这 个 href 属 性 的 内 容 就 是 将 要 跳 转 到 的 DOM 对 象 id 名 称 。 
然后 ， 获 得 这 个 DOM 对 和 象 距 离 页面 顶 端的 偏 移 像素 值 ， 再 调用 silentScrol1() 方 法 将 屏 货 深 动 
到 指定 位 置 。 

需要 注意 的 是 ,虽然 实现 的 效果 和 命名 销 记 是 一 样 的 ,但 是 指 癌 的 位 置 并 不 一 定 是 命名 销 记 。 
在 这 个 实现 方法 中 ， 既 然 命 名 锚 记 已 不 再 可 用 ,那么 代码 中 target 变 量 所 指 回 的 位 置 也 就 可 以 是 
各 种 HTML DOM 对 象 。 例 如 在 之 后 的 代码 示例 中 ， 命 名 锚 记 被 指向 到 : 

<h3 id="anchor1"> 当 前 页 面 的 命名 锚 记 《/h3》 

显然 ， 这 个 地 址 并 不 是 通常 命名 销 记 的 标记 ， 而 是 一 个 三 级 标题 。 

在 事件 响应 程序 的 最 后 ， 需 要 使 用 return false 来 结束 程序 ， 这 样 将 屏蔽 掉 jQuery Mobile 默 
认 的 Ajax 处 理 方式 。 否则 , 后 续 的 事件 处 理 程序 将 继续 执行 。 在 这 样 的 事件 啊 应 程序 中 , 以 returzn 
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false 结 束 相 当 于 分 别 调用 event.preventDefault() 和 event.stopPropagation() 方 法 。 这 两 个 方法 
的 功能 有 所 不 同 ， 具 体 如 下 所 示 。 
口 event.preventDefault(): 通知 浏览 硕 不 再 触发 与 事件 绑 定 的 默认 动作 。 
D event .stopPropagation(): 通知 训 览 硕 当 前 DOM 对 象 的 事件 处 理 程序 执行 之 后 ， 事 件 不 
骨 进 行 分 发 和 处 理 。 
完整 的 页 面 代 码 如 代码 清单 4-7 所 示 。 


代码 清单 4-7 单 页 模板 命名 销 记 实现 代码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function( ){ 
$('a.scroll').bind('click vclick', function(ev) { 
var target = $($(this).attr('href')).get(0).offsetTop; 
$.mobile.silentScroll(target); 
return false; 
}); 
}); 


</script> 
</head> 
<body> 
<div data-role="page" id="firstPage"> 
<div data-role="header"> 
<h1>jQuery Mobile 命 名 锚 记 </h1> 
</div> 
<div data-role="content"> 
<a class="scroll"” href="#anchor1"> 当 前 页 面 命名 锚 记 《</a> 
<div style="height:500px;"></div> 
<h3 id="anchor1"> 当 前 页 面 的 命名 锚 记 《/h3> 
<p> 
在 点 击 当 前 页 面 指向 命名 锚 记 anchor1 的 超级 链接 时 ， 触 发 绑 定 在 a.ScCT011 上 的 Click 以 及 vclick 事 件 
函数 。 此 时 不 再 处 理 jQuery Mobijle 默 认 的 Ajax 请 求 ， 而 是 根据 事件 函数 的 定义 跳 转 到 id= anchor1” 
的 标签 位 置 ， 模 拟 实 现 了 命名 锚 记 的 效果 。 


</p> 
</div> 
</div> 
</body> 
</html> 


4.3.2 在 多 页 模板 中 实现 命名 锁 记 
多 页 模板 下 命名 错 记 的 实现 方式 与 单 页 模板 基本 一 样 , 不 同 之 处 在 于 单 页 模板 的 命名 锚 记 跳 
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转 为 当前 页 面 内 ， 而 多 页 模板 需要 跳 转 到 指定 页 面 的 命名 销 记 位 置 。 这 样 ， 多 页 模板 中 超级 链接 
指 回 的 命名 销 记 地 址 需要 增加 页 面 id, 使 用 时 首先 解析 跳 转 的 目标 页 面 id 以 及 跳 转 到 的 命名 销 记 
目标 对 象 DOM id。 

在 代码 清单 4-8 中 ， 当 触发 绑 定 在 超级 链接 <a class="other-page-link" href="#secondPage- 
anchor2"></a> 上 的 click 或 vclick 事 件 时 ，JavaScript 将 会 解析 href 属 性 值 #secondPage-anchor2。 
该 属性 值 由 两 个 部 分 构成 : 前 半 部 分 secondPage 为 页 面 id,， 在 changePage() 困 数 中 用 于 页 面 跳 转 ; 
后 半 部 分 anchor2 为 命名 销 记 DOM 对 象 id， 将 被 传人 silentScrol1() 函 数 中 ， 模 拟 命 名 销 记 实现 
跳 转 。 两 个 部 分 通过 分 阳 号 “-” 进 行 分 割 。 当 触发 click 或 者 vclick 的 事件 啊 应 函数 时 , 会 将 href 
属性 值 所 包含 的 两 个 部 分 解析 出 来 ， 再 分 别 使 用 。 


代码 清单 4-8 绑 定 click 和 vclick 事 件 处 理 ， 以 处 理 多 页 模板 命名 锁 记 


<script type="text/javascript"> 
$(document).ready(function( ){ 
$('a.other-page-link').bind('click vclick', function(ev) { 
var href = $(this).attr('href'); 
var parts = href.split("-"); 
var page = parts[0|]; 
var id = "#"+parts[1|]; 
$.mobile.changepage($(page)); 
var target = $(id).get(0).offsetTop; 
$.mobile.silentScroll(target); 
return false; 
}); 
}); 


</script> 

一 个 值得 注意 的 细 广 是 ， 有 别 于 单 页 模板 ,多 页 模板 中 的 超级 链接 地 址 被 解析 后 ， 指 癌 命 名 
销 记 的 DOM 对 象 id 没 有 包含 “#”。 在 解析 之 后 ， 获 取 了 所 要 跳 转 的 页 面 地 址 。 命 名 销 记 处 理 程 
序 通 过 将 “#” 和 页 面 Ajax 地 址 拼接 在 一 起 ， 然 后 再 通过 调用 changePage( ) 也 数 实现 页 面 跳 转 。 

另 一 个 需要 注意 的 细节 是 , 绑 定 和 处 理 单 模 板 页 面 命名 销 记 的 事件 函数 与 多 页 面 模板 命名 销 
记 是 不 同 的 ,， 通 名 它们 的 处 理事 件 会 绑 定 到 不 同 的 CSS 类 上 。 这 是 因为 不 同 的 命名 销 记 的 处 理 程 
序 是 不 同 的 , 多 页 模板 中 的 命名 销 记 处 理 程序 比 单 页 模板 的 处 理 程序 多 了 一 个 步 又 , 增加 了 解析 
页 面 的 Ajax 地 址 。 

例如 ， 在 单 页 模板 中 ， 会 将 命名 销 记 处 理 程序 绑 定 在 : 

$('a.scroll').bind('click vclick', function(ev) { 

D); 

而 在 多 页 模板 代码 示例 中 ， 会 将 命名 锚 记 处 理 程序 绑 定 在 : 

$('a.other-page-link').bind('click vclick', function(ev) { 

D); 

多 页 模板 中 ， 命 名 锚 记 的 完整 实现 代码 如 代码 清单 4-9 所 示 。 标 记 Page 对 象 和 模拟 命名 锚 记 
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对 象 的 分 隔 符 为 -, 在 事件 绑 定 程序 中 会 按照 这 个 分 隔 符 进 行 解析 。 同 时 在 命名 锚 记 超级 链接 中 ， 
也 会 使 用 同样 的 分 隅 符 来 连接 Page 对 象 tdt 和 命名 销 记 标记 id。JavaScript 的 链接 地 址 解析 规则 和 
HTML 中 超级 链接 href 属 性 的 书写 规则 应 该 是 一 致 的， 否则 将 无 法 解析 。 


代码 清单 4-9 多 页 模板 命名 锚 记 实现 代码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function( ){ 
$('a.other-page-link').bind('click vclick', function(ev) { 
var href = $(this).attr('href'); 
var parts = href.split("-"); 
var page = parts[0|]; 
var id = "#"+parts[1]; 
$.mobile.changePpage($(page)); 
var target = $(id).get(0).offsetTop; 
$.mobile.silentScroll(target); 
return false; 
}); 
}); 


<«/script> 
</head> 
<body> 
<div data-role="page" id="firstPage"> 
<div data-role="header"> 
<h1>jQuery Mobile 命 名 锚 记 </h1> 
</div> 
<div data-role="content"> 
<a class="other-page-link” href="#secondPage-anchor2"> 多 页 模板 命名 锚 记 《</a> 
</div> 
</div> 
<div data-role="page" id="secondPage"> 
<div data-role="header"> 
<h1> 第 二 个 页 面 </h1> 
</div> 
<div data-role="content"> 
<h3 id="anchor2"> 多 页 模板 命名 锚 记 </h3> 
<p> 
有 别 于 单 模 板 页 面 中 的 命名 销 记 处 理 。 在 处 理 跳 转 到 另 一 页 面 中 的 命名 锁 记 时 ，click 与 vclick 事 件 涵 数 
对 链接 地 址 进行 解析 , 按照 约定 方式 将 地 址 解析 为 页 面 1d- 标 签 id 的 形式 。 例 如 ,#secondPage-anchor2 
表示 SecondPage 页 面 中 标签 id 为 anchor2 的 位 置 为 命名 锚 记 的 目标 地 址 。 
</p> 
</div> 
</div> 
</body> 
</html> 
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图 4-12 和 图 4-13 是 在 多 页 模板 环境 下 命名 销 记 代码 的 执行 效果 。 首 和 完 ， 扣 击 多 页 模板 命名 销 
记 链 接 之 前 ， 呈 现 的 界面 如 图 4-12 所 示 。 


| 1 当 二 .1 导 基 11UUA IT 辣 导 臣 TI 全 


| 


jQuery Maobileag.- 


图 4-12 ”多 页 模板 中 包含 有 命名 锚 记 的 起 始 页 面 
点 击 命 名 销 记 后 , 将 跳 转 到 第 二 个 页 面 , 并 定位 到 命名 锚 记 所 在 的 页 面 位 置 , 如 图 4-13 所 示 。 


到 
| 9 


第 二 个 页 面 


多 页 模板 闻名 销 ic 


别 于 当前 页 面 中 的 闻名 销 世 椒 理 。 在 处 
理 跳 转 到 另 一 页 面 中 的 命名 锚 记 的 时 候 ， 
click 与 veliek 本 件 了 图 数 对 链接 地 址 进行 解 
析 ， 按照 约定 方式 将 地 址 解析 为 "页 面 id- 
标签 id" 的 形式 。 例 如 ，#secondPage- 


anchor2 ,表示 secondPage 页 面 中 标签 记 
为 anchor2 的 位 置 为 闻名 锚 记 的 目标 地 
址 。 


图 4-13 ”定位 到 多 页 模板 页 面 中 的 命名 销 记 
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4.4 ”页 面 间 参 数 传递 


在 一 些 环境 下 ， 我 们 需要 在 不 同 页面 间 实现 数据 传递 。 在 基于 HTTP 服 务 融 的 开发 中 ， 我 们 
最 常用 的 一 种 实现 方式 是 ， 前 一 个 HTML 页 面 通过 POST 和 GET 方 式 将 需要 传递 的 内 容 提交 到 
HTTP 服 务 融 的 处 理 程序 ,服务 需 再 根据 传人 的 参数 将 下 一 个 页 面 准备 好 , 将 页 面 发 送 回 浏览 融 ， 
然后 再 在 浏览 姨 中 呈现 出 来 。 在 Web 移 动 应 用 的 开发 场景 中 ,这样 的 传递 方式 依然 是 最 普 裔 的 页 
面 间 参 数 传递 方式 之 一 。 如 果 页 面 传递 经 由 服务 絮 进 行 处 理 , 则 页 面 间 参 数 的 传递 方法 和 传统 的 
HTMLIL 页 面 参数 的 处 理 方 法 是 一 致 的 。 


面 间 切换 可 以 不 需要 与 服务 需 进 行 通 信 而 直接 实现 。 对 于 应 用 开发 而 言 ， 页 面 间 参数 传递 是 一 种 
常见 的 开发 场景 。 
在 多 页 模板 中 ,通常 有 以 下 3 种 方法 来 实现 页 面 间 的 参数 传递 。 
口 GET 方 式 : 在 前 一 个 页 面 生 成 参数 并 传人 下 一 个 页 面 , 然后 在 下 一 个 页 面 中 进行 GET 内 容 
解析 。 
口 通过 HTML5 的 Web Storage 进 行 参数 传递 。 
口 建立 当前 页 面 的 变量 ， 在 前 一 个 页 面 将 所 需 传递 的 参数 内 容 赋 值 到 变量 中 ， 在 后 一 个 页 
面 从 变量 中 将 参数 取出 使 用 。 这 种 方式 作为 多 页 模板 的 参数 传递 ， 各 个 页 面 的 传人 参数 
不 同 ， 则 会 表现 出 程序 灵活 性 较 轮 的 局 限 ， 所 以 我 们 将 不 会 重点 介绍 这 个 方法 。 
下 面 我 们 将 重点 介绍 前 两 种 方法 。 


4.4.1 ”通过 JavaScript 实 现 参 数 传递 


基于 HTTP GET 方 式 的 参数 传递 ， 是 通过 HTTP GET 的 方式 ， 将 需要 传递 的 参数 附加 在 页 面 
跳 转 的 URL 上 。 

在 这 样 的 方式 下 ,前 一 个 页 面 将 参数 值 添加 在 URL 地 址 内 , 后 一 个 页 面 则 从 这 个 URL 地 址 中 
将 相应 参数 值 解析 出 来 ， 并 将 相应 参数 赋值 到 相应 JavaScript 变 量 上 ， 以 实现 参数 传递 。 

生成 HITP GET 方 式 的 URL 地 址 和 进行 参数 赋值 的 代码 结构 通常 会 是 这 样 的 形式 : 

<a href="?parameter=4321#PagelD"rel="external"> 页 面 链接 </a> 

在 基于 GET 方 式 进 行 参数 传递 的 时 候 ， 参 数 定 义 在 前 ， 而 Ajax 指 向 的 页 面 DOM 对 象 id 在 后 。 
在 前 面 这 段 示 例 代码 中 , 参数 传递 数值 4321 在 前 , 而 跳 转 到 的 #PageID 这 个 页 面 的 Ajax 页 面 信息 放 
在 参数 值 之 后 。 

另 一 个 需要 标记 的 内 容 是 ， 注 明 访 问 的 页 面 形式 为 外 部 链接 形式 rel="external"， 否 则 页 面 
间 的 参数 传递 将 无 法 正常 执行 。 

此 外 ， 后 一 个 页 面 在 接受 来 自前 一 个 页 面 的 参数 传递 时 ， 可 以 通过 正则 表达 式 解 析 以 问号 ? 
开始 的 部 分 。 问 号 通常 是 URL 页 面 和 参数 之 间 的 分 割 符号 , 问号 之 前 为 页 面 地 址 , 问号 之 后 为 参 
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数 部 分 。 将 参数 部 分 的 内 容 解析 出 来 ， 就 可 以 获得 相应 的 参数 名 称 和 内 容 。 解 析 来 自前 一 个 页 面 
传递 参数 内 容 的 代码 片段 如 下 所 示 : 
function getParameterByName(name) { 
var match = RegExp('[?8&]' + name + '=([^&]*)').exec(window.location.search); 


return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); 
} 


小 经 验 大 部 分 HTTP URL 地 址 由 7 部 分 组 成 : 协议 名 、 服 务 器 名 称 、 域 名 、 端 口号 、 路 径 名 、 
文件 名 以 及 参数 , 例如 这 样 的 地 址 : http://servername.domainname.net:8080/v3/index.html? 
parameter=HelloWorld。 

由 于 HTTP 协 议 的 默认 端口 号 为 80，HTTPS 的 默认 端口 号 为 443， 所 以 如 果 使 用 默认 端 
口号 ， 那 么 端口 号 就 不 会 被 单独 写 出 来 。 


这 种 参数 处 理 方式 在 大 多 数 支持 HTML 4 和 HTMLS 的 浏览 器 环境 下 可 以 正常 运行 , 移动 设备 
的 兼容 性 会 比较 好 。 
整体 的 代码 示例 如 代码 清单 4-10 所 示 。 


代码 清单 4-10 ”以 GET 方 式 实现 页 面 间 参数 传递 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
function getParameterByName(name) { 
var match = RegExp('[?8&]' + name + '=([^&]*)').exec(window.location.search); 
return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); 
} 


$('#page Parameter1').live('pageshow', function(event, ui) { 
alert(' 第 二 个 页 面 的 参数 : ”+ getParameterByName('parameter')); 
}); 
</script> 
</head> 
<body> 
<section id="page Parameter0" data-role="page"> 
<header data-role="header"> 
《<h1> 页 面 参 数 传递 </h1> 
</header> 
<div class="content" data-role="content"> 
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《p> 传递 参数 进入 下 一 页 ， 以 Alert 方 式 显示 参数 内 容 。<br /> 
传递 参数 进入 Ka href="?parameter=4321#page_Parameter1"” rel="external"> 下 一 页 </a><br /> 
</p> 
</div> 
</section> 


<section id="page Parameter1" data-role="page"> 
<header data-role="header"> 
《<h1> 页 面 参 数 传递 </h1> 
</header> 
<div class="content" data-role="content"> 
《p> 通过 Alert 显 示 来 自前 一 个 界面 的 参数 。<br /> 
<a href="#page Parameter0"> 返 回 </a></p> 
</div> 
<«/section> 
</body> 
</html> 


在 示例 代码 中 ， 读 取 参 数 和 通过 aletrt 消 息 框 显示 出 来 的 JavaScript 被 绑 定 在 第 二 个 页 面 的 
pageshow 事 件 上 。 当 呈现 页 面 时 ， 会 自动 将 参数 信息 呈现 出 来 。 
当 第 二 个 页 面 接收 到 来 自 上 一 个 页 面 的 参数 信息 时 ， 则 会 呈现 图 4-14 所 示 的 效 末 。 


第 二 个 页 面 的 参数 : 4321 


OK 


图 4-14 ”以 HTTP GET 方 式 通 过 JavaScript 实 现 参数 传递 


4.4.2 ”通过 HTML5 Web Storage 特 性 实现 参数 传递 


Web Storage 特 性 是 HTMIL5 中 定义 的 基于 浏览 絮 的 存储 方法 , 通常 包含 两 部 分 一 一 sessionStorage 
和 localStorage。sessionStorage 是 将 存储 内 容 以 会 话 ( session ) 的 形式 存储 在 浏览 帮 中 ， 以 实 
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现 页 面 间 通 信 。 由 于 是 会 话 级 别 的 存储 ， 当 浏览 套 关 闭 之 后 ，sessionStorage 中 的 内 容 将 会 消失 。 
1ocalStorage 是 基于 持久 化 的 存储 ， 类 似 于 传统 HTML 开 发 中 cookie 的 使 用 。 除 非 主动 声明 删除 
localStorage 中 的 内 容 ， 否 则 将 不 会 删除 。 


注意 一 些 移动 设备 浏览 器 可 能 会 设置 localStorage 的 过 期 时 间 ， 如 果 超 过 这 个 时 间 ， 
localStorage 所 存储 的 内 容 也 会 被 移动 设备 浏览 器 清除 掉 。 


使 用 HTML5 的 Web Storage 特 性 实现 页 面 间 的 参数 传递 ， 就 是 将 所 需要 存储 和 传递 的 参数 通 
过 Web Storage 在 前 一 页 面 进行 存储 , 然后 在 后 一 个 页 面 中 读 取 出 来 而 实现 的 。 由 于 主流 的 移动 设 
备 可 以 支持 HTML5 的 Web Storage 特 性 ， 所 以 在 移动 设备 中 使 用 Web Storage 进 行 参数 传递 将 会 3 EF 
党 方便 。 

参数 传递 的 代码 片段 如 下 : 

<a href="#page Parameter1" onClick="sessionStorage.id=hello"> 下 一 页 </a> 

和 之 前 的 通过 JavaScript 实 现 参数 传递 的 方法 不 同 ， 使 用 Web Storage 进 行 参 数 传 递 不 需要 再 
次 连接 服务 需 进 行 页 面 请 求 ， 而 通过 当前 页 面 跳 苇 就 可 以 实现 。 没 有 了 JavaScript 对 于 HTTP GET 
字符 串 的 解析 ， 代 码 也 更加 简洁 。 

作为 HTML5 的 新 特性 ，Web Storage 在 不 同 移动 设备 浏览 希 中 可 能 存在 兼容 性 问题 ， 可 以 使 
用 代码 清单 4-11 检 查 浏 览 大 对 Web Storage 的 文 持 状况 。 


代码 清单 4-11 检查 浏览 硕 文 持 Web Storage 的 状况 


《!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 浏 览 器 兼容 Web Storage 检 查 </title> 
</head> 
<body> 
<script type="text/javascript"> 
if ( window.localStorage ){ 
alert(" 浏 览 器 支持 localStorage") 
} else { 
alert(" 浏 览 器 暂 不 支持 localStorage") 
} 


if ( window.sessionStorage ){ 
alert(" 浏 览 器 支持 sessionStorage") 


} else { 
alert(" 浏 览 器 暂 不 支持 sessionStorage") 
} 
</script> 
</body> 


</html> 
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注意 ”如果 直接 打开 存放 在 本 地 文件 系统 中 的 页 面 而 不 是 通过 Web 服 务 器 来 打开 这 个 页 面 ， 将 
无 法 获得 Web Storage 兼 容 性 的 正确 返回 结果 。 只 有 访问 发 布 在 Web 服 务 器 的 页 面 ，Web 
Storage 兼 容 性 测试 程序 才能 正常 执行 。 
同样 ， 关 于 Web Storage 的 Web 移 动 应 用 必须 发 布 在 Web 服 务 器 之 后 ， 再 通过 浏览 器 访问 
Web 服 务 器 中 的 页 面 才能 正常 运行 。 


在 Android 虚 拟 设备 中 ， 获 得 localStorage 支 持 情 况 的 检测 结果 如 图 4-15 所 示 。 


浏览 器 支持 localStorage 


OK 


图 4-15 ”浏览 古文 持 localStorage 
在 Android 虚 拟 设 备 中 ， 获 得 sessionStorage 文 持 情 况 的 检测 结 采 如 图 4-16 所 示 。 


浏览 器 支持 sessionStorage 


OK 


图 4-16 浏览 病 文 持 sessionStorage 
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通常 ， 在 jQuery Mobile 中 实现 页 面 间 参 数 传递 时 ， 我 们 不 使 用 localstorage 而 是 使 用 
sessionStorage。 因 为 localStorage 将 内 容 持 久 化 在 本 地 ， 这 在 页 面 间 传 递 参数 通常 是 不 必要 的 。 
使 用 sessionStorage 进 行 多 页 模板 各 个 页 面 间 参 数 传 递 的 示例 代码 如 代码 清单 4-12 所 示 。 


代码 清单 4-12 ”使 用 sessionStorage 进 行 页 面 间 参 数 传递 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$('#page Parameter1').live('pageshow', function(event, ui) { 
alert(' 第 二 个 页 面 的 参数 : ' + sessionStorage.id); 
}); 
</script> 
</head> 
<body> 
<section id="page Parameter0" data-role="page"> 
<header data-role="header"> 
《<h1> 页 面 参 数 传递 </h1> 
</header> 
<div class="content" data-role="content"> 
<p>》 传 递 参 数 进入 下 一 页 ， 以 Alert 方 式 显示 参数 内 容 。<br /> 
传递 参数 进入 xa href="#page Parameter1" onclick="sessionStorage.id=4321"> 下 一 页 《</a><br /> 
</p> 
</div> 
</section> 


<section id="page Parameter1" data-role="page"> 
<header data-role="header"> 
<h1> 页 面 参 数 传递 </h1> 
</header> 
<div class="content" data-role="content"> 
《p> 通过 Alert 显 示 来 自前 一 个 界面 的 参数 。<br /> 
<a href="#page Parameter0"> 返 回 </a></p> 
</div> 
<«/section> 
</body> 
</html> 


获得 参数 并 解析 的 代码 包含 在 第 二 个 页 面 的 pageshow 事 件 啊 应 函数 中 。 当 第 二 个 页 面 被 显示 
的 时 候 ， 从 sessionStorage 中 获得 id 数 但 ， 并 通过 Alert 呈 现 出 来 。 相 比较 之 前 的 JavaScript 方 式 ， 
这 个 代码 更 加 简洁 。 

由 于 显示 参数 内 容 的 方式 与 前 一 个 范例 中 JavaScript 实 现 参数 传递 的 方式 一 样 , 所 以 界面 也 是 
一 样 的 ， 如 图 4-17 所 示 。 
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第 二 个 页 面 的 参数 : 4321 


OK 


图 4-17 基于 HTML5 Web Storage 实 现 参 数 传递 


4.5 ”加 载 消 息 


加 载 消 息 通 党 是 改善 用 户 体 验 设 计 的 一 种 措施 。 当 从 一 个 页 面 跳 转 到 为 一 个 页 面 的 时 候 ， 如 
采 移 动 网 络 的 速度 慢 或 者 需要 加 载 的 页 面 尺 寸 过 大 , 将 会 造成 加 载 时 间 过 长 , 这 时 通过 呈现 加 载 
消息 将 有 助 于 改善 人 机 交互 界面 。 jQuery Mobile 提 供 了 默认 的 加 载 动画 提示 ,而 页 面 加 载 失 败 时 
则 会 呈现 Error Loading Page 字 样 。 

假如 被 跳 转 到 的 页 面 并 不 是 预 取 页 面 或 者 存在 于 多 页 模板 中 ， 而 是 某 个 独立 的 外 部 链接 页 
面 ， 这 时 浏览 右 中 首先 展现 的 是 加 载 消 朋 对 话 框 ， 而 不 是 下 接 跳 转 到 目标 页 面 。 

如 果 加 载 错误 ， 则 会 出 现 加 载 错误 消息 。 当 跳 转 到 某 个 不 存在 的 页 面 时 ， 就 会 触发 加 载 错 误 
消息 ， 如 图 4-18 所 示 。 


默认 加 载 消息 ， 点 击 进入 错误 地 址 ,点击 
关闭 消息 ， 点 击 


Error Loading Page 


图 4-18 加载 消息 与 加 载 异 党 消息 
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4.5.1 上 自 定义 加 载 消息 


蕉 认 人 情况 下 ， 加 载 的 消息 内 容 为 loading， 加 载 错误 消息 的 内 容 为 ErrorLoading Page。 在 进行 
国际 化 的 过 程 中 ， 可 以 定制 加 载 消息 的 内 容 , 例如 使 用 中 文 星 现 页 面 加 载 错误 消息 , 这 可 以 通过 
绑 定 mobileinit 事 件 对 loadingMessage 和 pageLoadETTorMessage 重 新 赋值 来 实现 : 
$(document).bind("mobileinit", function(){ 
$.mobile.pageLoadErrorMessage=" 页 面 加 载 错误 ";} 
$.mobile.loadingMessage=" 页 面 正在 加 载 中 "; 


$.mobile.loadingMessageTextVisible = true; 
$.mobile.loadingMessageTheme = "d"; 


1 
图 4-19 为 自 定义 页 面 加 载 消 息 和 自 定义 加 载 错 误 消 息 的 界面 截图 。 


目 是 六 加 载 消 息 ， 点 击 进入 错误 地 址 ,点击 
关闭 消息 ， 态 击 


全 页 面 加 载 错 误 


页 面 正在 加 载 中 


图 4-19 ”日 定义 加 载 消 息 与 加 载 错 误 消 息 


注意 由 于 mobileinit 在 jQuery Mobile JavaScript 库 加 载 之 后 蕊 上 进行 加 载 ， 所 以 定义 
pageLoadErrorMessage 的 JavaScript 代 码 段 需要 放 在 引用 jQuery Mobile JavaScript 文 件 之 
前 ， 否 则 将 无 法 正常 运行 。 


代码 清单 4-13 展 现 了 通过 mobileinit 初 始 化 事件 绑 定 实现 pageLoadErrorMessage 的 自 定义 
消息 。 需 要 注意 的 是 ，mobileinit 的 绑 定 必须 在 引用 jQuery 库 之 后 、 引 用 jQuery Mobile 库 之 前 
的 位 置 。 
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代码 清单 4-13” 自 定义 加 载 消息 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
«script src="../js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(document).bind("mobileinit", function(){ 
$.mobile.pageLoadErrorMessage=" 页 面 加 载 错误 "，; 
}); 
</script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page LoadMessage”data-Tole= page > 
<header data-Tole= header > 
<h1> 加 载 消息 </h1> 
</header> 
<div class="content" data-role="content"> 
《p> 进入 错误 地 址 ，<a href="notexisting.html"> 点 击 </a><br/ > 
</p> 
</div> 
</section> 
</body> 
</html> 


同样 ， 加 载 错误 的 消息 也 可 以 绑 定 在 pageinit、pageshow 或 者 onclick 事 件 以 实现 定制 化 错误 
消息 。 下 面 的 代码 基于 pageinit 事 件 自 定义 加 载 消 息 : 
$("#page LoadMessage").live("pageinit", function(){ 
$.mobile.pageLoadErrorMessage=" 页 面 加 载 错误 "; 


$.mobile。 loadingMessage =" 页 面 加 载 过 程 中 "; 
}); 


除了 能 够 自 定义 文字 内 容 外 , 还 可 以 设 定 加 载 消 息 是 否 支 持 动 画 ， 以 及 加 载 消息 和 加 载 错 误 
消息 的 风格 样式 。 加 载 消息 的 风格 样式 可 以 分 别 基 于 加 载 中 的 消息 和 加 载 错误 的 消息 两 类 属性 进 
行 定 制 。 和 常用 的 加 载 消 息 属 性 如 表 4-2 所 示 ， 常 用 的 加 载 错 误 消 息 属 性 如 表 4-3 所 示 。 


表 4-2 ”常用 加 载 消 息 属性 


属 性 售 义 
l0adingMessage 设置 自 定义 加 载 消息 ， 默 认为 loading 
loadingMessageTextVisible 如 果 将 该 属性 设置 为 true， 则 表示 任何 情况 下 加 载 消 息 均 会 被 显示 


loadingMessageTheme 设置 加 载 消 息 呈 现 风格 ,默认 风格 为 a 
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表 4-3 ”加 载 错误 消息 属性 


属 性 含义 
pageLoadErrorMessage 当 通过 Ajax 加 载 页 面 发 生 错 误 时 呈现 的 页 面 加载 错 误 消息 ， 默 认 值 为 Eror Loading Page 


pageLoadErrorMessageTheme 。 设置 加 载 错 误 消息 的 呈现 风格 ,默认 风格 为 e<， 表 示 淡 黄色 背景 的 消息 框 


4.5.2 ”通过 JavaScript 管 理 加 载 消 息 


在 某 些 情况 下 ,需要 根据 应 用 场景 而 触发 不 同 的 消息 。 例如， 当 在 jQuery Mobile 中 通过 延迟 
加 载 从 服务 融 获 取 某 个 列表 信息 时 , 则 可 能 会 显示 个 性 化 信息 “列表 加 载 中 …” 而 不 是 统一 的 “页 
面 加 载 中 …” 消 息 。 知 想 通 过 程序 触发 加 载 消 息 , 可 以 使 用 $.mobile.showPageLoadingMsg() 方 法 ， 


示例 代码 如 下 : 
<a_ href="#" onClick="$.mobile.showpageLoadingMsg('b', 
启动 自 定义 消息 框 
</a> 


该 方法 包含 3 个 参数 ， 具 体 如 表 4-4 所 示 。 
表 4-4 ”showPageLoadingMsg() 参 数 的 定义 


' 显 示 自 定义 消息 框 '，true); "> 


参 数 含 义 

Theme 加 载 消息 界面 呈现 风格 ， 默 认为 a 

msgText 加 载 消息 显示 文字 

textonly 如 采 为 true， 则 只 显示 文字 ， 否 则 只 显示 图 标 


如 末 将 textonly 参 数 设 置 为 true， 将 显示 文字 消息 框 ， 如 图 4-20 左 图 所 示 ; 如 有 果 将 textonly 
参数 设置 为 false， 将 不 显示 文字 消息 框 ， 如 图 4-20 右 图 所 示 。 


$ 


团 192.168.1.100/jqm/Sectio 辕 


国 192.168.1.100/jqm/Sectio 


图 4-20 ”使 用 showPageLoadingMsg() 实 现 目 定义 消息 框 
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如 采 不 需要 实现 目 定 义 消 息 , 而 仅仅 在 程序 需要 的 时 候 触 发 加 载 消 息 框 ， 此 时 使 用 不 市 有 任 
何 参数 的 $.mobile.showPageLoadingMsg() 方 法 就 可 以 了 。 

与 页 面 跳 转 过 程 中 的 加 载 消 息 不 同 , 通过 程序 触发 的 加 载 消 息 框 是 不 会 目 行 关 财 的 ,如 采 没 
有 通过 程序 加 以 控制 ， 消 息 框 将 始终 在 页 面 上 。 要 想 关 闭 消息 框 ， 可 以 使 用 $.mobile. 
hidePageLoadingMsg()， 比 如 : 


关闭 消息 ,《a href="#" onClick="$.mobile.hidePageLoadingMsg();"> 点 击 </a> 


注意 使 用 JavaScript 调 用 $.mobile.showPageLoadingMsg() 并 通过 参数 自 定义 消息 框 在 jQuery 
Mobile 1.0 和 1.1.0 这 两 个 版 本 下 的 呈现 是 不 同 的 。 在 jQuery Mobile 1.0 库 中 ， 通 常 只 能 哇 
现 默认 消息 框 ， 而 1.1.0 则 可 以 实现 自 定义 消息 。 如 果 在 jQuery Mobile 1.0 下 进行 自 定 义 消 
息 实现 ， 则 需要 封装 到 相对 复杂 的 JavaScript 函 数 中 来 实现 。 


4.6 ”离线 应 用 


很 多 场景 下 ( 例如 穿越 地 下 通道 或 者 漫步 在 群 山 之 间 )， 移 动 设备 的 网 络 并 不 是 那么 稳定 或 
者 干脆 没有 网 络 信号 , 这 将 会 影响 Web 移 动 应 用 的 用 户 体 验 。 借助 于 HTML5 的 离线 应 用 功能 , 开 
发 者 能 够 开发 出 即便 网 络 不 可 用 ， 页 面 内 容 只 要 被 缓存 就 可 以 正 笛 打开 和 操作 的 Web 移 动 应 用 。 
图 4-21 演 示 了 网 络 连接 失败 时 Android 梗 拟 融 中 所 呈现 的 页 面 , 左 图 为 网 络 连 接 中 的 离线 应 用 , 右 
图 为 网 络 中 断 时 打 不 开 页 面 的 情况 。 


. 


高 线 文 件 演示 一 


当 网 结 连 接 申 断 的 上 时候 ,由 于 内 容 已 经 被 

缓存 在 本 地 ， 所 以 内 容 、 主 题 和 样式 等 显 | | Webpage not available 

示 应 读 都 是 正常 的 。 
The webpage at http// 392.168.1.100/ 
gm Section0d/ Offliner Offline html might 
be temporarily down or tt may have 
moved permanenitly to a new web 
address. 


SUugdestions: 


® hake sure you have a data 
connection 

Reload this webpage later 

® Checkthe address YOU entered 


图 4-21 网络 连接 失败 时 Android 模 拟 絮 中 所 呈现 的 页 面 
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小 技巧 使 用 Android 模 拟 器 时 ， 使 用 F8 键 可 以 启动 与 关闭 网 络 连 接 。 
在 图 4-21 所 示 的 示例 中 ,就 是 使 用 这 样 的 方式 停止 模拟 器 的 网 络 连接 的 。 仔细 看 ， 左 图 
的 右上 角 有 3G 标 记 轩 ， 表 示 模 拟 器 正在 连接 网 络 中 ， 而 右 图 没有 3G 标 记 国 ， 表 示 模 拟 
器 的 网 络 连接 被 断 开 。 


借助 HTML5 的 离线 Web 移 动 应 用 功能 , 可 以 将 所 有 需要 缓存 的 内 容 缓存 在 浏览 希 中 。 在 网 络 
连接 失败 的 时 候 ， 通 过 加 载 缓存 中 的 内 容 ， 保 证 用 户 依然 可 以 访问 相应 的 应 用 。 
将 这 个 示例 Web 应 用 程序 改造 为 离线 Web 应 用 后 ， 即 便 移动 设备 的 网 络 连接 中 断 ， 再 次 刷新 
界面 ， 之 前 缓存 的 内 容 依然 可 以 正常 显示 ， 显 示 效 东 如 图 4-22 所 示 。 4 


离线 文件 演示 


当 网 络 连接 中 断 的 时 候 ， 由 于 内 容 已 经 被 
缓存 在 本 地 ， 所 以 内 容 、 主 题 和 样式 等 显 
示 应 该 都 是 正常 的 。 


图 4-22 ”模拟 带 网 络 中 断 ， 刷 新 页 面 所 呈现 的 离线 Web 应 用 界面 


比较 图 4-22 和 图 4-21， 发 现 只 有 右上 和 角 的 网 络 连 接 符 号 不 同 ， 前 一 个 页 面 拥 有 网 络 连 接 ， 而 
后 一 个 则 没有 。 

离线 Web 应 用 的 功能 只 能 在 HITML5 中 使 用 。 开 发 离线 Web 应 用 与 其 他 HIMLS 应 用 大 致 相同 ， 
需要 如 下 两 个 步骤 。 

(1) 调整 Web 服 务 器 以 支持 HTML5 的 离线 Web 应 用 功能 。 

(2) 编辑 离线 应 用 中 用 于 绥 存 规则 设置 的 .manifest 文 件 ， 然 后 将 .manifest 文 件 集成 到 HTML5 
页 面 中 。 


4.6.1 配置 Web 服 务 器 以 支持 离线 应 用 


不 论 将 Web 移 动 应 用 发 布 在 IIS 服 务 器 还 是 Apache 服 务 器 上 ， 默 认 配 置 下 均 不 支持 离线 应 用 。 
所 以 ， 首 先 需 要 配置 Web 服 务 器 中 .manifest 扩 展 名 的 文件 使 用 正确 的 MIME 类 型 。 
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默认 情况 下 ，IIS 中 已 经 包含 有 .manifest 扩 展 名 所 对 应 的 MIME 类 型 。 双 击 扩 展 名 ,打开 “ 编 
辑 MIME 类 型 ”对 话 框 ,将 .manifest 扩 展 名 所 对 应 的 MIME 类 型 设置 为 text/cache-manifest, 如 图 4-23 
所 示 ， 此 时 IIS 就 可 以 支持 离线 应 用 了 了。 


[© 6) |@» LMING-PC ， 网 站 » Defauk Web Site ， - | 到 
文 忻 (F) 。 规 加 (V) ”帮助 (MH) 

| 

| 

ee 仿 。”MIME 类 型 

4 LUMING-PFC (LuMing-POW | 使 用 此 功 新 管理 起 Web 服务 器 用 作 静 恋 文 忻 的 文件 扩展 名 和 关联 的 内 容 灿 型 的 列 禾 ， 
.应 用 侈 序 沁 x 
分 诅 党 过 :不 进行 分 组 村 
克 Defauk Web Site 扩展 名 “ MIME dW 条“ © 
m13 apphcaton/x-msmediewew 2 
ml14 apph<avon/x-msmediewew EY 
ee 站 富生 MIME 呈 本 
m3 [4 
me 过 
manif - 部 
二 manijest 型 - 
-mdb MIME 兴 开 (M): 总 
mdp text/cache-manifest 也 
me 
-mht Ey 
.mhaml 型 
.mid Ey 
.midi 一 一 sooroJmrmor 偶 
.Mx apphcation/ 好 
.mmf applhcaton/x-smaf 全 
-mmo Yext/xrr 写 
Mn applhcat msm 宇 
mm wdeo/auvicktme 型 要 
能 疯 加 内 容 吉 图 


配置 : “Defauk Web Site” web.config 


图 4-23 ”配置 .manifest 文 件 的 MIME 类 型 


在 Apache 服 务 硕 中 , 也 需要 设置 .manifest 的 MIME 类 型 来 支持 离线 应 用 。 在 Apache 服 务 硕 中 ， 
需要 在 Apache 配 置 文件 httpd.conf 中 添加 这 样 的 配置 项 : 


AddType text/cache-manifest .manifest 
AddType text/cache-menifest .apache 


Apache 配 置 文件 httpd.conf 默 认 位 于 /etc/httpd/confrhttpd.conf。 当 httpd.conf 配 置 文件 被 修改 之 
后 ,重新 启动 Apache 服 务 硕 ， 则 这 个 配置 就 生效 了 。 
在 Red Hat Linux 下， 重新 启动 Apache HTTP 服 务 的 命令 为 : service httpd restart。 


4.6.2 ”开发 与 集成 离线 应 用 


在 Web 移 动 应 用 中 要 实现 HTMLS 的 离线 功能 ， 需 要 完成 如 下 3 个 步 又。 

(1) Web 服 务 器 支持 .manifest 文 件 的 MIME 格 式 设 定 ， 这 部 分 我 们 在 4.6.1 节 中 介绍 过 。 

(2) 在 网 页 的 chtml> 标 签 中 加 入 manifest 属 性 ， 并 指 到 .manifest 文 件 。 

(3) 定义 .manifest、 绥 存 文件 清单 和 绥 存 方式 。 

首先 ， 正确 设置 .manifest 文 件 。 在 前 一 方 中 ， 我 们 介绍 了 在 HTTP 服 务 右 中 添加 .manifest 文 件 
的 实现 方法 。 在 此 基础 上 , 我 们 在 HTML5 网 页 文件 中 添加 .manifest 的 定义 , 则 可 以 实现 离线 应 用 。 

我 们 可 以 自己 定义 .manifest 文 件 的 内 容 ， 但 是 文件 格式 需要 为 UTF-8。 将 .manifest 文 件 定 义 添加 
到 HTML5 页 面 的 html 标 签 中 , 浏览 器 会 根据 .manifest 文 件 的 定义 缓存 离线 环境 下 所 需要 使 用 的 文件 : 


4.6 离线 应 用 03 


<html] manifest="offline.manifest"> 


代码 清单 4-14 演 示 了 完成 的 离线 应 用 HTML 网 页 代码 。 
代码 清单 4-14 HTML5 离 线 应 用 页 面 代码 示例 


《!DOCTYPE html> 
<html manifest="offline.manifest"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="js/jquery-1.7.1.min.js"></script> 
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.]js"></script> 4 
</head> 
<body> 
《Section id="page Offline" data-role="page"> 
<header data-Tole= header > 
<h1> 离 线 文件 演示 </h1> 
</header> 
<div class="content" data-role="content"> 
<p> 
当 网 络 连接 中 断 的 时 候 ， 由 于 内 容 已 经 被 缓存 在 本 地 ， 所 以 内 容 、 主 题 和 样式 等 显示 应 该 都 是 正常 的 。 
</p> 
</div> 
</section> 
</body> 
</html> 


这 里 .manifest 文 件 被 命名 为 offline.manifest， 其 中 包含 离线 环境 下 需要 用 到 的 文件 清单 。 基 于 
这 个 .manifest 文 件 所 定义 的 离线 文件 清单 ，Offline.html 页 面 、jQuery 和 jQuery Mobile 库 已 经 在 本 
地 绥 存 下 来 。 当 网 络 不 能 连接 的 时 候 ， 浏 览 带 会 通过 HTML5 的 离线 应 用 技术 直接 从 本 地 调 取 这 
些 文件 。 代 码 清单 4-15$ 是 离线 应 用 manifest 的 代码 示例 。 


代码 清单 4-15 HTML5 离 线 应 用 manifest 的 代码 示例 

CACHE MANIFEST 

Offline.html 

JS/jquery-1.7.1.min.]js 

Js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css 

js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.]js 

在 离线 应 用 的 .manifest 定 义 中 ， 除 了 定义 离线 缓存 的 文件 外 ， 还 可 以 定义 不 进行 离线 缓存 的 
文件 以 及 网 络 不 通 时 重 定 问 的 文件 名 。 

在 .manifest 文 件 中 增加 NETWORK 部 分 ,将 可 以 定义 必须 进行 网 络 访问 的 文件 。 例 如 ， 奉 
offline.manifest 文 件 下 方 添加 如 下 的 代码 ， 则 不 绥 存 这 几 个 页 面 : 


NETWORK: 
login.php 
logout.php 


此 外 , 在 .manifest 文 件 中 定义 FALLBACK, 可 以 定义 网 络 连 接 不 通 的 情况 下 可 替代 的 访问 资源 。 


惠 出 页 面 


弹出 页 面 是 jQuery Mobile 1.2.0 开 始 文 持 的 新 特性 。 使 用 弹出 页 面 , 开发 者 能 够 快速 开发 出 用 
户 体验 更 好 的 移动 应 用 。 基 于 弹出 页 面 , 开发 者 可 以 定制 译 在 移动 设备 浏览 融 之 上 的 对 话 框 、 沫 
单 、 提 示 框 、 表 单 、 相 册 和 视频 ， 其 至 可 以 集成 第 三 方 的 地 图 组 件 。 

在 这 一 章 中 ， 我 们 将 会 了 解 到 : 

口 弹出 页 面 的 基本 概念 ; 


口 不 同形 式 的 弹出 效 来 ; 
口 集成 弹出 图 片 、 视 频 、 地 图 和 徐 产 面板 等 高 级 特效 ; 
口 定制 弹出 页 面 样式 ; 


口 开发 弹出 页 面 的 相关 技术 。 


5.1 基本 的 弹出 页 面 


在 基于 jQuery Mobile 1.1.1 版 本 或 者 更 早 版 本 开发 的 Web 移 动 应 用 中 , 虽然 支持 丰富 的 页 面 切 
换 ， 但 是 没有 提供 在 一 个 页 面 中 弹出 一 个 浮动 页 面 或 者 对 话 框 的 功能 ， 这 在 jQuery Mobile 1.2.0 
及 其 之 后 的 版 本 中 得 以 实现 。 

弹出 页 面 是 一 个 相对 宽 沁 的 概念 ， 包 括 弹 出 对 话 框 、 采 单 和 骸 僚 末 单 、 表 单 、 图 片 、 视 频 、 
履 兰 面板 、 地 图 等 不 同 的 形式 。 几 乎 所 有 能 够 用 来 “弹出 ”的 页 面 元 系 ， 痢 可 以 通过 一 定 方式 妈 
接 在 弹出 页 面 这 个 特性 上 。 

图 5$-1 呈 现 了 以 弹出 页 面 技 术 实现 弹出 对 话 框 的 效 末 ， 点 击 左 图 的 “提示 框 ” 按 钮 ， 将 呈现 
右 图 的 弹出 提示 框 。 当 使 用 者 打开 一 个 弹出 提示 框 时 , 一 个 提示 框 将 在 当前 页 面 呈现 出 来 ， 而 不 
需要 跳 转 到 其 他 页 面 。 

实现 弹出 页 面 时 , 逢 要 实现 两 个 部 分 一 一 弹出 按钮 和 弹出 页 面 。 弹出 按钮 通 当 基于 一 个 超 
级 链接 实现 。 在 超级 链接 中 ,设置 属性 data-rel 为 poppup， 表 示 以 弹出 页 面 方式 打开 所 指向 的 
内 容 : 

<a href="#popupTooltip" data-rel="popup” data-role="button” data-inline="true"> 提 示 框 </a> 

弹出 页 面部 分 通 第 是 一 个 div 的 DOM 容 人 各， 其 中 将 data-role 属 性 声明 为 popup， 表 示 以 弹出 
方式 呈现 其 中 的 内 容 : 
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<div data-role="popup" id="popupTooltip"> 


</div> 


| . 
MEANS ， 
二 | 


提示 框 可 以 加 在 移动 应 用 中 ， 用 于 提醒 
和 指示 用 户 进行 后 续 操作 


图 5-1 ”弹出 对 话 框 的 效果 


和 其 他 多 页 模板 中 打开 对 话 框 或 者 页 面 的 方式 一 样 , 超级 链接 中 href 属 性 所 指 问 的 地 址 是 页 
面 DOM 容 需 的 id。 当 使 用 者 点 击 超级 链接 时 , 则 打开 弹出 页 面 。 因 为 超级 链接 的 data-rel 设 置 为 
popup， 以 及 页 面 的 data-role 也 设置 为 popup， 则 这 样 的 页 面 将 以 弹出 页 面 的 形式 打开 。 

图 5-1 的 完整 代码 示例 如 代码 清单 5-1 所 示 。 


代码 清单 5-1 基本 的 弹出 窗口 代码 结构 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 弹 出 页 面 </h1> 
</header> 
<div class="content" data-role="content"><a href="#popupTooltip" 
data-rel="popup”data-role="button”data-inline="true" > 提示 框 </a> 
<div data-role="popup" id="popupTooltip"> 
<p><strong> 提 示 : 《</strong></p> 


《p> 提示 框 可 以 加 在 移动 应 用 中 ， 用 于 提醒 和 指示 用 户 进 行 后 续 操作 ，。 
</p> 


</div> 
</div> 
<«/section> 
</body> 
</html> 


5.2 不 同 的 弹出 效果 


很 多 用 户 界 面 都 适合 使 用 弹出 界面 来 呈现 ， 例 如: 
口 提示 框 ; 

口 表单 与 般 合 来 单 ; 

口 表单 ; 

口 对 话 框 。 


5.1 廊 已 经 介绍 了 提示 框 弹出 页 面 ， 所 以 本 市 将 不 再 重复 介绍 这 部 分 内 容 ， 而 介绍 剩 下 的 3 种 
情况 。 


5.2.1 荣 音 与 诅 套 荣 单 


在 弹出 页 面 中 ， 羔 单 有 助 于 使 用 者 在 操作 过 程 中 选择 功能 或 切换 页 面 ， 如 图 5-2 所 示 。 


图 5-2 ”弹出 菜单 


琳 蛙 和 网 倒 采 单 的 超级 链接 设计 与 所 有 其 他 弹出 页 面 的 超级 链接 按钮 几乎 是 一 样 的 。 需要 注 


意 的 是 ， 在 超级 链接 按钮 中 ， 增 加 值 为 popup 的 属性 data-rel， 然 后 将 超级 链接 地 址 指向 弹出 菜 
单 的 DOM 容 器 id: 
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<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true"> 
菜单 - 地 理 分 界 
</a> 


厂 要 实现 弹出 采 单 的 功能 ， 只 要 将 包含 有 有 末 单 的 列表 视图 加 入 到 弹出 页 面 div 容 兹 中 即 可 ， 
具体 代码 如 下 . 


<div data-role="popup" id="popupMenu" data-theme="a"> 
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b"> 
<1i data-role="divider”data-theme="a"> 地 理 分 界 </1i> 
<1i><a href="#"> 亚 洲 </a></1i> 
<1i><a href="#"> 斐 洲 </a></1i> 
<1i><a href="#" > 欧洲 </a></1i> 
<1i><a href="#"> 南 美洲 </a></1i> 
<1i><a href="#"> 北 美洲 </a></1i> 
<]i><a href="#"> 南 极 洲 </a></1i> 
<]i><a href="#"> 大 洋 洲 </a></1i> 
</Uul> 
</div> 


如 果 需 要 分 类 显示 菜单 , 则 沫 单 中 的 分 类 条 目 可 以 通过 设置 data-role 属 性 为 divider 来 实现 。 
沫 单 分 类 显示 的 样式 可 以 参见 网 5-3 左 图 。 如 果 沫 单 高 度 比 较 小 ， 那 么 分 类 之 后 便于 大 家 识别 和 
定位 。 如 果 荣 单条 目 很 多 ， 这 个 设计 就 不 方便 了 。 如 果菜 单 高 度 超 过 移动 设备 浏览 需 的 高 度 ， 操 
作 有 菜单 时 还 需要 深 动 屏 供 ， 这 样 很 容易 误 磁 到 及 单 之 外 的 区 域 ， 而 关闭 采 单 。 


# 
# 
# 
# 
# 
# 


图 5-3” 左 图 为 分 类 菜单 ， 右 图 为 般 套 菜单 


在 荣 单 条 目 很 多 的 场景 下 ， 使 用 般 套 沫 单 能 获得 更 好 的 用 户 体验 。 在 图 $-3 所 示 的 示例 中 ， 
两 个 沫 单列 表 所 呈现 的 菜单 条 目 是 一 样 的 。 左 图 将 所 有 菜单 条 目 自 上 而 下 列 出 来 , 右 图 则 使 用 了 
般 套 菜单 的 效果 。 相 比 之 下 ， 右 侧 的 通 套 沫 单 更 方便 进行 菜单 操作 和 和 定位 到 某 个 菜单 条目 上 。 

要 实现 散人 套 采 单 ， 可 以 通过 在 弹出 页 面 中 航 入 折 著 列表 。 折 欠 列 表 是 从 jQuery Mobile 1.2.0 
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开始 文 持 的 ， 这 将 在 第 9 草 中 详细 介绍 。 
在 将 折 码 列表 装 和 人 弹出 页 面 的 div 容 带 之 后 ， 通 过 点 击 弹出 页 面 的 超级 链接 按钮 承 可 以 打开 


这 个 租 套 菜单 。 


注意 ” 谱 套 菜单 是 通过 集成 折 坪 列表 实现 的 。 与 折 有 登 列表 的 使 用 约束 一 样 ， 误 套 菜 单 只 支持 一 
级 诅 僚 ， 而 不 支持 多 级 衣 套 。 


图 5-3 的 完整 代码 示例 如 代码 清单 5-2 所 示 。 
代码 清单 5-2 弹出 采 单 和 弹出 黄 僚 采 单 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page1" data-role="page'"> 
<header data-Tole= headeT > 
<h1> 璋 出 页 面 </h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupMenu" data-rel="popup" data-role="button" 
data-inline= "true" > 菜单 - 地 理 分 界 </a> 
<div data-role="popup" id="popupMenu" data-theme="a"> 
<ul data-Tole= ]istview” data-inset="true" style="min-width:210px;" data-theme="b"> 
<1i data-role="divider ”data-theme="a"> 地 理 分 界 </1i> 
<1i><a href="#"> 亚 洲 </a></1i> 
<1i><a href="#"> 非 洲 </a></1i> 
<1i><a href="#"> 欧 洲 </a></1i> 
<1i><a href="#"> 南 美洲 </a></1i> 
<1i><a href="#"> 北 美洲 </a></1i> 
<1i><a href="#"> 南 极 洲 </a></1i> 
<1i><a href= # "> 大 洋 洲 5/a></1i> 
</U]> 
</div> 
<a href="#popupNested" data-rel="popup" data-role="button" 
data-inline="true"> 级 联 菜 单 - 地 理 分 界 </a> 
<div data-role="popup" id="popupNested" data-theme="none"> 
<div data-role="collapsible-set" data-theme="b" data-content-theme="c 
data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; 
width:250px;"> 
<div data-role="collapsible" data-inset="false"> 
<h2> 七 大 洲 </h2> 
<ul data-role="listview"> 
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<1i><a href="#"> 亚 洲 </a></1i> 
<l1i><a href="#"> 非 洲 </a></1i> 
<1i><a href="#"> 欧 洲 </a></1i> 
<1i><a href="#"> 南 美洲 </a></1i> 
<1i><a href="#"> 北 美洲 </a></1i> 
<1i><a href= # > 南极 洲 K/a></]i> 
<1i><a href="#" > 大洋 洲 C/a></]iy> 
</U]> 
</div> 
《!-- /collapsible --> 
<div data-role="collapsible" data-inset="false"> 
<h2> 关 大 洲 </h2> 
<ul data-role="listview"> 
<]i><a href="#"> 亚 欧 大 陆 </a></1i> 
<1i><a href="#"> 非 洲 </a></1i> 
<1i><a href="#"> 南 美洲 </a></1i> 
<1i><a href="#"> 北 美洲 </a></1i> 
<1i><a hzef= # “> 南极 洲 K/a></1i> 
<1i><a href="#"> 大 洋 洲 </a></1i> 
</U]> 
</div> 
<div data-role="collapsible" data-inset= false > 
<h2> 五 大 洲 </h2> 
<ul data-role="listview"> 
<]i><a href="#"> 亚 欧 大 陆 </a></1i> 
<1i><a href="#"> 非 洲 </a></1i> 
<1i><a hiref= "# > 美洲 </a></]iy> 
<1i><a href= # > 南极 洲 K/a></]i> 
<1i><a href="#"> 大 洋 洲 </a></]iy> 
</U]> 
</div> 
<div data-role="collapsible" data-inset= false > 
<h2> 四 大 洲 </h2> 
<ul data-Tole="Listview"> 
<Li><a href="#"> 亚 非 欧 大 陆 </a></1i> 
<1i><a href="#"> 美 洲 </a></1i> 
<1i><a href= # “> 南极 洲 K/a></1i> 
<1i><a href="#"> 大 洋 洲 </a></1i> 
</U]> 
</div> 
</div> 
</div> 
</div> 
</Sectiony> 
</body> 
</html> 


5.2.2 ”表单 


在 jQuery Mobile 1.2.0 之 前 的 表单 实现 中 ,只 能 在 页 面 中 区 入 表单 。 如果 将 表 蛙 舱 入 在 一 个 弹 
出 页 面 中 ， 那 么 表单 的 内 容 将 更 加 突出 。 
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和 所 有 的 HTML 表 单 操作 没有 什么 两 样 ， 在 提交 弹出 表单 的 内 容 时 ， 表单 内 容 都 可 以 提交 到 
Web 服 务 融 进行 进一步 处 理 。 
要 实现 弹出 表单 , 只 需 在 弹出 页 面 的 div 容 需 中 加 入 表单 即 可 , 示例 代码 如 代码 清单 5-3 所 示 。 


代码 清单 5-3 ”弹出 表单 的 示例 代码 


<div data-role="popup" id="popupForm" data-theme="b" class= Ui-Ccorner-al]1 > 
<form> 
<div style="padding:10px 20px;"> 
<input type= text”name= name” id="name” Value= ”placeholder= 有 登录 名 ”data-mini= true /> 
<input type= " Password ”name= pasSsword ”id= password ”Value= 
placeholder= 密码 ”data-mini= true /> 
<div style="margin-top:20px;” > 
<fieldset class="ui-grid-a" data-mini="true"> 
<div class= Ui-block-a > 
<button type= TeSset ”data-theme= d > 取消 /buttony> 
</div> 
<div class="vui-block-b" data-mini= true > 
<button type="submit” data-theme="a"> 提 交 </button> 
</div> 
</fieldset> 
</div> 
</div> 
</form> 
</div> 


运行 代码 清单 5-3， 获 得 的 效果 如 图 5-4 所 示 。 


弹出 Form 表 单 


图 5-4 ”弹出 表单 


在 前 面 这 个 示例 中 ,将 表单 的 theme 色 板 设 置 为 56， 这 是 一 种 底 色 为 灰色 的 配色 。 开 发 者 可 以 
尝试 不 同 的 主题 色 版 ， 不 同色 版 将 呈现 不 同 的 配色 效果 。jQuery Mobile 默 认 支 持 5 种 色 极 ,分别 
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对 应 data-theme 属 性 的 a、b、c、d、e。 开 发 者 可 以 选择 不 同 的 色 板 以 美化 弹出 效果 ， 示 例 代码 
如 下 : 


<div data-role="popup" id= popupForm” data-theme="b" class="vi-corner-all"> 


注意 在 弹出 页 面 表单 中 ， 需 要 对 表单 元 素 距离 弹出 页 面 的 边界 进行 定义 ， 具 体 代 码 为 : <div 
style="padding:10px 20pXx;j >。 
在 弹出 页 面 的 设计 中 ， 这 个 表单 的 边 距 设置 是 必须 要 注意 的 。 否 则 ， 表 单元 素 和 弹出 页 
面 会 拥挤 在 一 起 而 显得 局 促 。 设 置 和 不 设置 边 距 的 呈现 效果 参见 图 5-5。 如 果 不 是 弹出 表 
单 ， 通 常 不 需要 特别 增加 这 样 的 边 距 设计 。 


图 5-5” 左 图 为 设置 边 距 的 样式 ， 右 图 为 没有 设置 边 中 的 样式 


注意 未 来 , jQuery Mobile 有 可 能 通过 增加 新 的 CSS 样 式 定义 解决 这 个 问题 。 如果 开发 者 需要 手 
工 实 现 表单 在 弹出 页 面 中 的 边 距 设 定 ， 最 好 能 够 根据 不 同 屏幕 分 状 率 使 用 CSS3 的 Media 
Queries 技 术 选 择 不 同 的 边 距 设 定 。 

为 普通 移动 屏幕 和 高 分 辨 率 屏 幕 的 呈现 效果 可 能 不 同 ， 通 过 CSS3 的 Media Queries 技 术 
将 可 以 更 好 地 应 对 这 样 的 场景 。 


5.2.3 ”对 项 框 


弹出 对 话 框 是 弹出 页 面 最 常用 的 功能 ， 如 图 5-6 所 示 。 在 之 前 介绍 的 对 话 框 页 面 中 ， 往 往 需 
要 从 一 个 页 面 切 换 到 对 话 框 页 面 才能 显示 对 话 框 内 容 , 而 基于 弹出 页 面 对 话 框 , 用 户 将 不 需要 进 
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行 页 面 切换 就 可 以 直接 看 到 对 话 框 的 内 容 。 


关于 弹出 对 话 框 


弹出 页 面 特效 是 iDOuery Mobile 1.2.0 
的 新 特性 。 


弹出 对 话 框 是 弹出 页 面 特效 的 一 种 ， 
呈现 为 对 话 框 的 效果 。 


图 $-6 ”弹出 对 话 框 


实现 弹出 对 话 框 的 方法 是 , 声明 一 个 div 容 条, 并 设置 data-role 属 性 为 popup， 然 后 将 弹出 对 
话 框 的 代码 装 人 这 个 弹出 页 面 的 div 容 需 中 即 可 。 当 使 用 者 点 击 超级 链接 按钮 时 ， 打 开 的 内 容 就 
是 这 个 弹出 对 话 框 了 。 图 5-6 的 实现 代码 如 代码 清单 5-4 所 示 。 


代码 清单 5-4 ”弹出 对 话 框 代 码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
《Section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 弹 出 页 面 </h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupDialog" data-rel="popup" data-role="button" data-inline="true"> 
弹出 对 话 框 
</a> 
<div data-role="popup" id= popupDialog” data-overlay-theme="a" 
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data-theme="c" style="max-width:400px;" class="ui-corner-all"> 
<div data-role="header" data-theme="a" class="Ui-corner-top"> 
<h1> 关 于 弹出 对 话 框 </h1> 
</div> 
<div data-role="content" data-theme="d" class= "ui-corner-bottom ui-content"> 
<p> 弹 出 页 面 特 效 是 jQuery Mobile 1.2.0 的 新 特性 。</p> 
<p> 弹 出 对 话 框 是 弹出 页 面 特 效 的 一 种 ， 呈 现 为 对 话 框 的 效果 。《/p> 
<«a href="#" data-role="button" data-rel="back" data-transition="flow" 
data-theme="b"> 
确认 
</a> 
</div> 
</div> 
</div> 
<«/section> 
</body> 
</html> 


通 第 ,弹出 对 话 框 中 只 包含 员 眉 标题 栏 和 正文 内 容 部 分 。 在 某 些 场景 下 ,弹出 对 话 框 也 可 能 
包含 页 脚 工 具 栏 ， 但 这 并 不 常见 。 

在 前 面 这 个 示例 中 ,设置 data-role 属 性 为 header 的 div 容 器 所 包含 的 内 容 为 页 眉 标 题 栏 。 页 
眉 标 题 栏 中 h1 到 h6 标 题 所 包含 的 文字 将 会 作为 标题 栏 的 文字 突出 显示 。 

<div data-ITole= header >…/div> 

对 话 框 的 正文 被 放置 在 data-role 属 性 为 content 的 div 容 天 中 

<div data-role="content">..</div> 

如 采 需 要 设置 页 脚 工 具 栏 ， 则 可 以 将 相应 内 容 放置 于 data-Tole 属 性 为 footer 的 div 容 可 中 : 


<div data-role="footer" >..</div> 
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图 片 、 视 频 、 地 图 和 徐 盖 面板 也 是 弹出 页 面 中 使 用 较 多 的 技术。 基于 弹出 页 面 , 使 用 者 不 用 
切换 页 面 就 能 打开 不 同 的 媒体 文件 ， 并 浏览 媒体 内 容 。 使 用 这 些 新 特性 ,开发 者 只 和 需 编 写 很 少 的 
代码 就 能 获得 有 趣 的 用 户 体 验 效 果 。 


5.3.1 图 片 


在 弹出 图 片 的 设计 中 , 图 斤 几 乎 占据 整个 弹出 页 面 , 突出 而 醒目 地 呈现 在 浏览 硕 中 , 如 图 5-7 
所 不。 

简单 地 说 ， 实 现 弹 出 图 三 的 方法 是 将 图 三 添加 在 弹出 页 面 div 容 带 中 。 

此 时 图 片 会 按 比 例 最 大 程度 地 填充 整个 弹出 页 面 。 如 果 图 片 的 大 寸 和 六 览 带 的 尺寸 正好 一 
致 ， 那 么 可 能 因为 没有 可 以 触发 关闭 弹出 页 面 的 地 方 导 致 用 户 不 方便 跳 转 回 之 前 的 页 面 。 因 此 ， 
在 弹出 页 面 中 ,通常 会 包含 一 个 关闭 按钮 ， 具体 代码 如 下 。 
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<div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="c" 
style="max-width:400px;" class="vi-corner-all"> 
<a href="#'" data-rel="back" data-role="button" data-theme="a" data-icon="delete" 
data-iconpos="notext" class="vui-btn-right">Closex</a> 
<img class="popphoto" src="images/Penguins.jpg" alt="Colorful city /> 
</div> 


图 5-7 弹出 图 片 
在 Close 超 级 链接 按钮 中 ， 我 们 将 属性 data-iconpos 设 置 为 notext， 而 将 data-rel 属 性 设置 为 


back。 点 击 Close 按 钮 后 ， 页 面 会 返回 到 上 一 个 页 面 ， 也 就 是 退出 弹出 页 面 而 回 到 之 前 的 页 面 。 


在 实际 的 使 用 过 程 中 , 移动 设备 屏 副 会 在 水 平方 向 和 垂直 方向 之 间 切 换 。 随 着 屏 融 方 占 的 变 


化 , 图 乒 可 能 会 超出 屏 贿 显示 范围 , 此 时 为 了 不 遮挡 图 片 , 需要 在 页 面 加 载 的 时 候 计 算 屏 禹 尺寸 ， 


并 根据 屏幕 尺寸 减 去 一 定 的 边际 值 而 重新 设置 弹出 图 片 的 人 寸 。 在 代码 清单 -5 中, pageinit 事 件 


中 设置 图 片 的 最 大 尺寸 会 比 屏幕 高 度 小 50 像 素 就 是 基于 此 。 


代码 清单 5-5 在 pageinit 事 件 中 设置 图 片 尺寸 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$( document ).on( "pageinit", function() { 
$( "#popupPhoto" ).on({ 
popupbeforeposition: function() { 
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var maxHeight = $( window ).height() - 50 + "px"; 
$( "#popupPhoto ;img”).css( "max-height", maxHeight ); 


}); 
}); 
</script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 璋 出 页 面 《/h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupPhoto" data-rel="popup" data-role="button" data-inline="true"> 
弹出 图 片 
</a> 
<div data-role="popup" id="popupPhoto" data-overlay-theme="a" 
data-theme="c" style="max-width:400px;" class="ui-corner-all"> 
<a href="#" data-rel="back" data-role="button" data-theme="a" 
data-icon="delete" data-iconpos="notext" class="ui-btn-right"> 
Close 
</a> 
<img class="popphoto" src="images/Penguins.jpg" alt="Colorful city /> 
</div> 
</div> 
</section> 
</body> 
</html> 


图 $-8 是 在 移动 设备 中 水 平 显示 弹出 图 斤 时 的 效 末 。 因 为 屏 才 比例 发 生变 化 ， 此 时 图 所 高 度 
和 宽度 略微 发 生 一 些 调 整 ， 以 便于 显示 。 


图 5-8 ”水 平方 向 上 弹出 图 片 的 显示 效果 


5.3.2 视频 


视频 内 容 也 可 以 通过 弹出 页 面 来 显示 ,而 使 用 者 可 以 在 包含 有 弹出 视频 的 页 面 中 浏览 视频 内 容 。 
实现 弹出 视频 页 面 与 实现 弹出 图 片 的 方式 大 致 相同 ， 只 需要 将 播放 视频 的 iframe 或 者 embed 
标签 的 内 容 从 入 到 弹出 页 面 的 div 容 器 中 即 可 ， 示 例 图 如 图 $-9 所 示 。 


丽 /QuerY 


jQuery Mobile 时 用 开 

发 库 ， 基 于 jQuery 所 开发 。 这 个 开 一 
六 可 以 持 当前 大 多 数 移动 设备 Sa 
浏览 器 


sal ery Mobile 快 
开发 出 用 户 界 面 风格 统一 的 移动 
应 前 


图 $-9 ”弹出 视频 


通常 ,为 了 保证 呈现 效果 足够 好 , 开发 者 们 建议 能 够 设置 一 定 的 页 边 距 , 这 可 以 通过 scale() 
限 数 来 实现 。 基 于 用 户 界面 设计 经 验 ， 通 第 会 你 留 15 像 系 的 页 边 中 。 
当 移 动 设备 发 生 垂 生 或 者 水 平 切换 的 时 候 ， 移 动 应 用 程序 最 好 能 够 谈 取 切换 后 的 屏 峰 矿 才 。 
人 en 最 好 能 够 通过 程序 成 比例 缩放 播放 条 。 
这 与 之 前 所 介绍 的 弹出 图 片 中 的 场景 类 似 , 不 同 的 是 这 需要 成 比例 缩放 ， 而 不 可 以 只 对 宫 度 
或 者 蜗 度 进行 凑 放 处 理 。 


scale() 限 数 的 男 一 个 功能 就 是 根据 浏览 各 的 尺寸 设置 合适 的 弹出 页 面 显 示 尺 寸 ， 其 代码 如 
代码 清单 5-6 所 示 。 


4 


代码 清单 5-6 ”用 于 内 容 缩放 和 边 距 处 理 的 scale() 晒 数 


function scale( width, height, padding, border ) { 

var scrWidth = $( window ).width() - 30， 
scrHeight = $( window ).height() - 30， 
ifrpadding = 2 * padding, 
ifrBorder = 2 * border, 
ifrWidth = width + IfrPadding + ifrBorder, 
ifrHeight = height + :ifrpPadding + ifrBorder, 
h, w; 


if ( ifrWidth < scrWidth && ifrHeight «< scrHeight ) { 
w = ifrWidth; 
h = ifrHeight; 
} else if ( ( ifrwidth / scrWidth ) > ( ifrHeight / scrHeight ) ) { 
w = scrWidth; 
= ( scrWidth / ifrWidth ) * ifrHeight; 
} else { 
h = scrHeight; 
w = ( scrHeight / ifrHeight ) * ifrWidth; 
} 


return { 
'width': w - ( ifrpadding + ifrBorder )， 


GD 有 关 scale() 郴 数 的 相关 信息 ， 请 参阅 http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html。 
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'height': h - ( ifrPpadding + ifrBorder ) 
}; 
}; 


注意 ”scale() 兄 数 是 弹出 页 面 中 经 常 使 用 的 技术 。 尽管 jQuery Mobile 文 档 推荐 使 用 scale() 函 数 

进行 视频 和 地 图 边界 设 定 ， 但 是 这 个 函数 并 没有 包含 在 jQuery Mobile 库 或 者 jQuery 库 中 ， 
开发 者 可 以 直接 将 这 个 代码 引用 到 所 需要 的 页 面 中 。 
另 一 个 需要 注意 的 细节 是 ， 很 多 视频 内 容 是 通过 误 入 第 三 方 网 站 的 iframe 实 现 的 。 在 进 
行 页 面 初始 化 的 时 候 ， 需 要 将 iframe 的 高 度 和 宽度 设置 为 0。 在 打开 视频 播放 器 ， 播 放 器 
页 面 创建 完成 而 未 呈现 在 浏览 器 界面 上 的 时 候 ， 重 新 绘制 iframe 的 尺寸 到 期 望 的 尺寸 。 
在 关闭 播放 器 页 面 时 ， 再 重新 设置 iframe 的 高 度 和 宽度 为 0。 


代码 清单 5-7 是 对 视频 内 容 进行 人 寸 设 定 的 代码 示例 。 
代码 清单 5-7 ”通过 绑 定 弹出 页 面 事件 设 定 视频 播放 从 太 二 


$( document ).on( "pageinit", function() { 
$( "#popupVideo embed" ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 


$( "#popupVideo" ).on({ 
popupbeforeposition: function() { 
var size = scale( 480, 415, 15, 1 )， 
w = size.width, 
h = size.height; 


$( "#popupVideo embed” ) 
.attr( "width", w ) 
.attr( "height", h ); 
)， 
popupafterclose: function() { 
$( "#popupVideo embed” ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 


注意 ”集成 视频 网 站 内 容 的 方式 不 同 ， 通 过 绑 定 弹出 页 面 事件 进行 视频 播放 器 尺寸 设 定 的 实现 
方式 也 略 有 不 同 。 如 果 视 频 播 放 器 通过 embed 标 签 直 接点 套 在 弹出 页 面 div 容 器 中 ， 则 可 
尺 使 用 前 面 的 代码 。 如 果 视 频 播 放 器 通过 iframe 标 签 以 内 联 框 架 的 方式 误 套 在 弹出 页 面 
div 容 器 中 ， 则 需要 将 $(>"#popupVideo embed”) 调整 为 $( "#popupVideo iframe”)。 


弹出 视频 的 完整 页 面 代码 如 代码 清单 5-8 所 示 。 
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代码 清单 5-8 ”弹出 视频 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/ 
jquery.mobile-1.3.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
function scale( width, height, padding, border ) { 
var scrWidth = $( window ).width() - 30， 
scrHeight = $( window ).height() - 30， 
ifrPpadding = 2 * padding, 
ifrBorder = 2 * border, 
ifrWidth = width + IfrPadding + ifrBorder, 
ifrHeight = height + ifrpPadding + ifrBorder, 
h, w; 


if ( ifrWidth < scrWidth && ifrHeight «< scrHeight ) { 
w = ifrWidth; 
h = ifrHeight; 
} else if ( (ifrwidth / scrWidth ) > ( ifrHeight / scrHeight ) ) { 
w = scrWidth; 
h = ( scrWidth / ifrwidth ) * ifrHeight; 
} else { 
h = scrHeight; 
w = ( scrHeight / ifrHeight ) * ifrWidth; 
} 


return { 
'width': w - ( ifrpadding + ifrBorder )， 
'height': h - ( ifrpadding + ifrBorder ) 
}; 
}; 


$( document ).on( "pageinit", function() { 
$( "#popupVideo embed" ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 


$( "#popupVideo" ).on({ 
popupbeforeposition: function() { 
var size = scale( 480, 415, 15, 1 )， 
w = size.width, 
h = size.height; 


$( "#popupVideo embed” ) 
.attr( "width", w ) 
.attr( "height", h ); 
}, 
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popupafterclose: function() { 
$( "#popupVideo embed" ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 
} 
}); 
}); 


</script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 弹 出 页 面 </h1> 
</header> 
<div class="content" data-role="content"> <a href="#popupVideo" 
data-rel="popup”data-role="button”data-inline="true" 3 弹出 土豆 视频 《</a> 
<div data-role="popup" id="popupVideo" data-overlay-theme="a" 
data-theme="c" style="max-width:480px;" class="ui-corner-all"> 
<a href="#" data-rel="back" data-role="button" data-theme="a" 
data-icon="delete" data-iconpos="notext" class="vui-btn-right">Closex</a> 


<embed src="http://www.tudou.com/v/NhnT3t7PSTw/&rpid=117243609&resourceld=117243609 05_ 
05 99&bid=05/V.swf" 
type="application/x-shockwave-flash" allowscriptaccess="always" 
allowfullscreen="true" wmode="opaque" width="480" height="400"></embed> </div> 
<div style="height:500px"></div> 
</div> 
</section> 
</body> 
</html> 


移动 设备 的 网 络 带 宽 可 能 不 稳定 ， 其 分 辨 率 也 参差 不 齐 , 同时 并 不 是 每 个 移动 设备 都 支持 高 
清 视 频 。 如 采 能 够 针对 移动 设备 分 辨认 的 不 同 而 加 载 不 同 尺 寸 的 视频 预 完 图 片 , 将 能 提供 更 好 的 
用 户 体 验 。 很 多 海外 视频 网 站 ( 比如 Facebook ) 能 够 为 开发 者 和 使 用 者 提供 不 同 尺寸 的 视频 和 预 
览 图 片 以 实现 这 样 的 优化 。 

以 Facebook 视 频 为 例 ， 使 用 Graph API 可 以 获得 同一 个 视频 内 容 的 不 同 分 辨 率 的 显示 脚本 。 
Graph API 是 Facebook 所 提供 的 开放 API 接 口 , 下 面 的 代码 片段 展示 了 获得 id 为 10151026962332084 
的 视频 的 基本 信息 : 


https://graph.facebook.com/ 10151026962332084?fields=id,name,format&access token={YourFacebook 
Token} 


通过 Facebook Graph API 调 用 ， 获 得 的 JSON 格 式 结果 如 代码 清单 5-9 所 示 。 


代码 清单 5-9 Facebook 返 回 的 视频 内 容 
{ 


"id": "10151026962332084"， 
"from": { 

"name": "Lu Ming", 

"id": "727972083" 
5 
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"description": "jQuery Mobile 的 基本 概念 "， 

"picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc6/ 

245287 10151026963867084 10151026962332084 24448 571 t.jpg"， 

"embed html": "<object width=\"400\" height=\"224\" > 
<param name=\"allowfullscreen\" value=\"true\" /><param name=\"movie\" 
value=\"http://www.facebook.com/v/10151026962332084\"” /> 
<embed src=\"http://www.facebook.com/v/10151026962332084\" 
type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" 
width=\"400\" height=\"224\"></embed></object>", 

“Icon : "http://static.ak.fbcdn.net/rsrc.php/v2/yD/r/DggDhA4z4t0O.gif", 

"source": "http://video.ak.fbcdn.net/cfs-ak-snc6/v/232466/46/10151026962332084 21895.mp4?oh 
=1a6a709c2e4a3daea4eddf78a2560f79&oe=506EB8A5& gda 
=1349433414_8fefad34f4736161de35c25bc00d2bbe ， 

"created time": “2012-10-03T13:05:29+0000 ， 

"updated time : “2012-10-03T13:05:29+0000 ， 

"format": [ 

{ 

"embed html": "<object width=\"130\”height=\"73\”><param name=\"allowfullscreen\" 
value=\"true\" /><param name=\"movie\" value=\"http://www.facebook.com/v/10151026962332084\" /> 
<embed src=\"http://www.facebook.com/v/10151026962332084\" 
type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" 
width=\"130\" height=\ 73\ ></embed></obJject> ， 

"width": 130， 

"height": 73， 

"filter": "130x130", 

"picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc6/ 
S130xX130/245287_10151026963867084_10151026962332084 24448 571 t.jpg" 


"embed html": "<object width=\"480\" height=\"270\" > 
<param name=\"allowfullscreen\" value=\"true\" /> 
<param name=\"movie\" value=\"http://www.facebook.com/v/10151026962332084\" /> 
<embed src=\"http://www.facebook.com/v/10151026962332084\" 
type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" 
width=\"480\" height=\ 270\ ></embed></object> ， 

"width": 480， 

"height": 270， 

"filter": "480x480"， 

"picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc6/ 
S480x480/245287_10151026963867084 10151026962332084 24448 571 b.jpg" 


"embed html": "<object width=\"720\" height=\"405\" > 
<param name=\"allowfullscreen\" value=\"true\" /><param name=\"movie\" 
value=\"http://www.facebook.com/v/10151026962332084\"” /> 
<embed src=\"http://www.facebook.com/v/10151026962332084\" 
type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" 
width=\"720\" height=\"405\"></embed></object>", 

"width": 720， 

"height": 405， 

"filter": "720x720", 

"picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc6/ 


5.3 ”弹出 页 面 的 高 级 功能 381 


S720X720/245287_10151026963867084_10151026962332084_24448_571 b.jpg" 
}, 
{ 
"embed html": "<object width=\"1280\" height=\"720\" ><param name=\"allowfullscreen\" 
value=\"true\" /><param name=\"movie\" value=\"http://www.facebook.com/v/10151026962332084\"” /> 
<embed src=\"http://www.facebook.com/v/10151026962332084\" 
type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" 


width=\"1280\" height=\"720\"></embed></object>", 
"width": 1280， 


"height": 720， 
"filter": "native", 
"picture": "http://vthumb.ak.fbcdn.net/hvthumb-ak-snc6/ 
245287_10151026963867084_10151026962332084_24448_571 b.jpg" 
} 


] 
} 


从 代码 清单 5-9 中 可 以 看 到 ， 在 返回 数据 中 包含 有 这 段 视频 的 详细 介绍 。Facebook Graph API 


中 视频 内 容 返回 值 的 属性 与 含义 可 参见 表 5-1。 视 频 格 式 〈format ) 的 主要 Metadata 属 性 及 其 含义 
可 参见 表 5-2。 


表 5-1 Facebook Graph API 中 视频 返回 值 的 属性 及 其 含义 


其 合 义 
属 性 含 义 

id 视频 id， 此 处 为 10151026962332084 

format 视频 格式 ， 以 数组 形式 包括 3 种 预 设 尺寸 的 视频 信息 以 及 一 种 原始 视频 尺寸 信息 

updated_time 内 容 上 载 时 间 ， 此 处 为 2012-10-03T13:05:29+0000 


小 技巧 基于 Facebook GraphnAPI， 开 发 者 可 以 获得 丰富 的 对 象 信息 。 如 果 读 者 感 兴趣 ， 想 进一步 了 
解 Facebook Graph API 文 档 ， 可 详 见 https://developers.facebook.com/docs/reference/api/。 


在 Graph API 所 返回 的 format 数 组 中 ， 包 含有 不 同 尺寸 的 Flash 视 频 Metadata 内 容 。 在 这 样 的 
Metadata 中 ，Facebook 提 供 了 不 同 尺 才 的 视频 成 比例 缩放 之 后 的 尺 才 、 缩 略 网 位 置 以 及 般 和 脚本。 


表 5-2 Facebook Graph API 中 Flash 祝 频 的 主要 Metadata 属 性 及 其 含 


属 性 含义 

embed html 用 于 笛 入 Facebook Flash 视 频 的 脚本 。 如 果 使 用 ， 需 要 进行 HTML 内 容 转 义 

width 视频 宽度 ， 单 位 为 像素 

height 视频 高 度 ， 单 位 为 像素 

filter 过 滤 条 件 ， 如 480*480 表 示 最 大 党 度 或 最 大 高 度 为 480 像 素 ，native 表 示 为 原始 尺寸 
picture 视频 缩 略图 地 址 


基于 浏览 器 的 分 辨 率 ,， 开 发 者 可 以 选择 不 同 的 通 人 式 脚本 来 弹出 视频 窗口 。 例 如 , 将 之 前 所 
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返回 的 format 数 组 中 480*480 过 小 条 件 所 对 应 的 视频 舱 入 到 移动 应 用 中 ， 相 关 代 码 如 代码 清单 5-10 
所 示 人 


代码 清单 5-10 ” 骸 入 Facebook 视 频 的 弹出 视频 代码 片段 


<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" 

style="max-width:480px;" class="vui-corner-all"><a href="#" data-rel="back" data-role="button" 

data-theme="a" data-icon="delete" data-iconpos="notext" class="vui-btn-right">Closex</a> 

<object width= 480” height='273' > 

<param name='allowfullscreen' value='true' /> 

<param name= movie” value="' http://www.facebook.com/v/10151026962332084' /> 

<embed src='http://www.facebook.com/v/10151026962332084" 

type='application/x-shockwave-flash' allowfullscreen='true' width= 480” height= 273 ></embed> 

</object> 


</div> 


此 外 ， 在 处 理 播 放 融 像 系 尺寸 的 scale() 果 数 中 ， 也 需要 根据 Facebook Graph API 所 获得 的 长 
宽 比 例 进 行 设 置 。 在 这 个 Facebook 程 序 中 ，scale() 函 数 被 设置 为 这 样 : 
var size = Scale( 480, 273, 15, 1 )， 


w = size.width, 
h = size.height; 


基于 Facebook Graph API 所 获得 的 视频 信息 ， 集 成 到 弹出 视频 页 面 的 呈现 效果 如 图 5-10 所 示 。 


融 jQUerY 


jQuery Mobile 是 一 套 移动 应 用 开 
发 库 ， 基 于 jQuery 所 开发 。 这 个 开 
发 库 可 以 支持 当前 大 多 数 移 动 设备 


浏览 器 。 


开发 者 可 以 使 用 Query Mobile 快 
i 界面 风格 统一 的 移动 
心 用 。 


Oct 3, 2012 6:05am 


Lu 


图 $-10 ”弹出 页 面 呈现 Facebook 视 频 


注意 ”虽然 在 Facebook Graph API 所 获得 的 视频 对 象 数据 中 ,filter 过 滤 条 件 为 480*480,， 但 是 在 
实际 设置 播放 器 界面 的 时 候 ， 需 要 使 用 Width 和 height 属 性 ， 而 不 是 过 滤 条 件 。 过 滤 条 件 
用 以 通过 Graph API 找 到 最 佳 分 辨认 的 视频 内 容 与 缩 略图 。 这 是 使 用 Facebook Graph API 
处 理 视频 时 需要 注意 的 。 


5.3.3 ”地 图 
将 地 图 般 入 在 移动 应 用 中 的 示例 图 如 图 5-11 所 示 。 


5.3 ”弹出 页 面 的 高 级 功能 83 


- 号 
村 -这 


we 


一 


. + 
+ | 
一 一 / 
中 | 
I 
- 
- 
- 
可 
- 
4 
于 
于 
- 
- 
- 
' 
" 
' 


a 
十 


图 5-11 弹出 百度 地 图 


以 集成 百度 地 图 为 例 , 要 实现 弹出 地 图 ,主要 有 两 种 方法 : 一 种 方法 是 将 地 图 绘制 在 内 联 框 
2 将 地 图 以 
图 片 格式 呈现 在 弹出 页 面 中 。 由 于 后 一 种 方法 缺少 交互 性 ， 我 们 主要 介绍 前 一 种 方法 。 

Sa et be dm 
们 将 使 用 百度 地 图 创建 工具 目 动 创建 。 开 发 者 也 可 以 通过 百度 地 图 API 开 发 目 己 的 地 图 页 面 。 


小 技巧 百度 地 图 创建 工具 位 于 
http://dev.baidu.com/wik1/static/map/APLtool/creatMap/。 


在 百度 地 图 创建 工具 中 ( 如 图 5-12 所 示 ), 我 们 在 左 侧 输 入 地 图 创建 条 件 , 接着 点 击 页 而 下方 的 
“获取 代码 ”按钮 ， 获 得 地 图 页 面 的 HTML 代码， 然后 将 这 些 代码 单独 保存 在 移动 应 用 项 目 中 。 


ee 
Bai 候 地 图 | AP| 


首页 开发 指南 示例 学 习 类 参考 AP| 更 新 日 志 AP 贴吧 成 功 案例 常见 问题 联系 我 们 
第 一 步 创建 地 图 
1. 定 位 中 心 点 自 定义 地 图 代码 
当前 城市 : 北京 市 切换 C1DOCTYPE html PUBLIC“- 3C/ DTD XHTI 
he 
当前 地 图 中 心 点 经 纬度 : < 


X: 116.395645 即 所 ee 
e iption” content=" 中 2 工 自 定 六 地图， 部 户 视 化 操作 下 i 

Y: 打 允 9966 | 福地 定义 地 图 ， 帮助 用 户 在 可 视 化 操作 下 生成 百 
训 ee 


" content="text/html; charset=gb2312 了 
图 ,百度 地 图 API， 百 度 地 图 自 定义 工具 ， 百 度 地 图 所 只 


当前 地 图 级 别 : “12 


2. 设 置地 图 
3. 添 加 标注 
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图 $-12 ”百度 地 图 创建 工具 
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在 包含 弹出 地 图 页 面 的 应 用 中 , 将 生成 的 百度 地 图 页 面 通过 iframe 内 联 框架 集成 在 移动 应 用 
具体 代码 如 下 . 


<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" 
data-corners="false" data-tolerance="15,15"> 
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" 
data-iconpos="notext" class="vui-btn-right">Closex</a> 
<iframe src="map/baidumap.html" width="450" height="270" seamless></iframe> 
</div> 


经 过 上 面 两 个 步 又 实现 的 应 用 在 一 些 移动 设备 操作 系统 上 运行 时 ， 有 可 能 会 出 现 显 示 异 第 。 
例如 ， 在 Android 2.3 中 ， 可 能 会 出 现 因为 加 载 iframe 内 联 框架 造成 布局 混乱 。 为 此 ， 还 需要 对 之 
前 的 代码 进行 一 些 优化 ， 以 保证 应 用 在 不 同 操 作 系统 中 正常 显示 。 

这 样 的 优化 大 致 机 经 过 如 下 3 个 步骤 。 

(1) 添加 scale() 函 数 〈 关 于 这 个 函数 的 详细 信息 ， 请 参见 5.3.2 )。 

(2) 添加 pageinit 事 件 啊 应 函数 。 在 这 个 函数 中 ， 设 置 内 联 框 淋 以 及 内 联 框 淋 页 面 中 展现 百 
度 地 图 的 div 容 各 的 高 度 和 宽度 。 由 于 百度 地 图 位 于 内 联 框架 所 指向 的 页 面 ， 所 以 可 以 使 用 下 面 
的 代码 来 设置 高 度 : 

$( "#popupMap iframe" ).contents().find( "#map canvas”).css( { "width": w, "height" : h } ); 


(3) 优化 用 百度 地 图 创建 工具 所 生成 的 页 面 。 在 百度 地 图 容器 之 外 ， 增 加 一 个 用 作 设 置地 图 
宽度 和 高 度 的 div 容 希 。 在 这 个 代码 实现 中 ， 这 个 div 容 融 的 id 为 map_canvas。 另 外 ， 在 CSS 样 陈 
定义 中 ,设置 #map_canvas 的 height 属 性 高 度 值 为 100%。 

使 用 百度 地 图 创建 工具 生成 的 代码 是 不 包含 viewport 声 明 的 ,这 样 可 能 导致 在 一 些 浏览 器 中 
显示 不 正常 ， 因 此 需要 在 百度 地 图 页 面 的 chead> 中 对 viewport 进 行 如 下 设置 : 


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 


调整 之 后 ， 百 度 地 图 的 地 图 容 右 代码 参见 代码 清单 5-11 所 示 。 
代码 清单 5-11 经 过 优化 的 百度 地 图 容 带 代码 片段 


<div id="map canvas"> 

《1-- 百 度 地 图 容器 --> 

<div style="width:480px;height:320px;border:#ccc solid 1px;" id="dituContent"></div> 
</div> 


经 过 上 述 优化 调整 后 ， 集 成 在 弹出 页 面 中 的 百度 地 图 就 可 以 正 背 呈现 在 不 同 的 浏览 带 中 了 。 
百度 地 图 弹出 页 面 的 完整 实现 代码 如 代码 清单 5-12 所 示 。 


代码 清单 5-12 ”完整 的 百度 地 图 弹出 页 面 


《!DOCTYPE html> 
<html> 
<head> 
<meta Charset= utf-8 > 
<meta name="viewport" Content= width=device-width，initial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
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<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
function scale( width, height, padding, border ) { 
var scrWidth = $( window ).width() - 30， 

scrHeight = $( window ).height() - 30， 

ifrpadding = 2 * padding， 

ifrBorder = 2 * border, 

ifrWidth = width + ifrpadding + ifrBorder, 

ifrHeight = height + ifrpPadding + ifrBorder, 

h, w; 


if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) { 
w = ifrWidth; 
h = ifrHeight; 
} else if ( ( ifrwidth / scrWidth ) > ( ifrHeight / scrHeight ) ) { 
w = scrWidth; 
h = ( scrWidth / ifrwidth ) * ifrHeight; 
} else { 
h = scrHeight; 
w = ( scrHeight / ifrHeight ) * ifrWidth; 


} 
return { 
'width': w - ( ifrpadding + ifrBorder )， 
'height': h - ( ifrPpadding + ifrBorder ) 
}; 
}; 


$( document ).on( "pageinit", function() { 
$( "#popupMap iframe” ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 


$( "#popupMap iframe" ).contents().find( "#map canvas” ) 
.css( { "width"” : 0, "height"” : 0 } ); 


$( "#popupMap” ).on({ 
popupbeforeposition: function() { 
var Size = scale( 480, 320, 0, 1 )， 
w = size.width, 
h = size.height; 


$( "#popupMap iframe” ) 
.attr( "width", w ) 
.attr( "height", h ); 


$( "#popupMap iframe" ).contents().find( "#map canvas” ) 
.Css( { "width": w, "height"” : h } ); 
}， 
popupafterclose: function() { 
$( "#popupMap :iframe” ) 
.attr( "width", 0 ) 
.attr( "height", 0 ); 


$( "#popupMap iframe" ).contents().find( "#map canvas” ) 
.css( { "width": 0, "height" : 0 } ); 
} 
中) 
}); 
</script> 
</head> 
<body> 
《Section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 璋 出 页 面 《/h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupMap”" data-rel="popup" data-role="button" data-inline="true"> 
弹出 百度 地 图 
</a> 
<div data-role="popup" id="popupMap" data-overlay-theme="a" data-theme="a" 
data-corners="false" data-tolerance="15,15"> 
<a href="#" data-rel="back" data-role="button" data-theme="a" 
data-icon="delete" data-iconpos="notext" class="vui-btn-right"> 
Close 
</a> 
<iframe src="map/baidumap.html" width="450" height="270" seamless> 
</iframe> 
</div> 
</div> 
</section> 
</body> 
</html> 


小 技巧 如 果 开 发 者 希望 进一步 了 解 百度 地 图 的 开发 方法 ， 可 以 参考 下 面 这 两 个 PDF 文 档 : 
百度 地 图 开发 指南 ( 详 见 http://dev.baidu.com/wiki/static/map/APlLdoc/developer.pdf ) 和 百 
度 地 图 API 参 考 ( 详 见 http://dev.baidu.com/wiki/static/map/APl/doc/classes.pdf )。 


如 果 开 发 海外 地 图 应 用 ， 可 以 使 用 Google 地 图 。 在 基于 jQuery Mobile 开 发 的 应 用 中 ， 使 用 
Google 地 图 和 百度 地 图 大 人 怪 上 是 相当 的 ， 这 里 我 们 就 不 再 获 述 了 。 示 例 图 如 图 5-13 所 示 。 
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图 5-13 ”弹出 Google 地 图 
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Google 地 图 提供 两 套 不 同 级 别 的 地 图 API 接 口 一 一 Maps API 和 Maps API Premier， 大 多 数 应 用 使 用 
MapsAPI 台 能 满足 需求 。 如 采 需 要 文 持 每 天 更 多 的 API 接 口 调用 次 数 、 更 大 的 地 图 尺寸 、 缩 放 上 比例 等 
特性 ， 以 及 需要 获得 更 多 技术 文 择 和 保证 应 用 文 持 更 多 应 用 场景 ， 则 需要 用 到 MapsAPI Premier 接 口 。 

Google Maps API 和 Maps API Premier 接 口 的 比较 请 参阅 http://maps.google.com/help/maps/ 
getmaps/compare.html。 


5.3.4 ”禾苗 面板 


禾 瑚 面板 可 以 作为 导航 工具 栏 的 扩展 ， 当 打开 它 时 ， 它 以 半 透 明 的 样式 呈现 出 来 ， 如 图 5-14 
所 示 。 在 触 碰 面板 之 外 的 区 域 时 ， 将 天 闭 窗 盖 面 板 。 


图 5-14 ”和 窗 盖 面板 


在 窗 冀 面板 中 ， 可 以 包含 按钮 或 其 他 表 蛙 元 系 。 

要 实现 上 履 关 面板， 大 和 致 需要 下 面 3 个 步 又 。 

(1) 首先 将 各 个 按钮 放置 在 弹出 页 面 的 div 容 郁 内 部 。 下 面 的 这 段 代 码 将 按钮 以 mini 样 式 放置 
在 履 关 面板 中 ， 并 设置 按钮 的 图 标 样式 : 


<div data-role="popup" id="popupOverlayPanel" data-corners="false" 
data-theme="none" data-shadow="false" data-tolerance="0,0"> 


<button data-theme="a" data-icon="back” data-mini="true"> 返 回 </button> 

<button data-theme="a"” data-icon="grid"” data-mini="true"> 菜 单 </button> 

<button data-theme="a"” data-icon="plus” data-mini="true"> 继 续 </button> 
</div> 


这 段 代 码 设置 了 按钮 的 主题 属性 data-theme 为 a。 如 果 不 设 置 ， 覆 盖 面 板 将 继承 上 一 级 容 需 
的 主题 设置 。 

(2) 为 了 方便 触 控 操作 ， 可 以 设置 触 控 面 板 中 各 个 按钮 的 边 距 、 背 景 颜色 和 宽度 等 。 

(3) 最 后 ， 由 于 设置 控制 面板 高 度 时 ， 不 能 在 CSS 中 使 用 height:100% 的 方法 来 表示 ， 所 以 需 
要 通过 JavaScript 将 控制 面板 的 高 度 设置 为 与 浏览 器 屏幕 的 高 度 一 致 .下 面 的 代码 将 高 度 设 置 绑 定 
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在 履 兰 面板 的 popupbeforeposition 事 件 上 , 在 每 次 打开 上 禾 凑 面板 之 前 将 履 凑 面板 的 局 度 设 置 为 与 
当前 浏览 器 窗口 的 高 度 一 样 : 
<script type="text/javascript"> 
$('#popupOverlayPanel' ) .live('popupbeforeposition', function(){ 
var h = $(window).height(); 
$("#popupOverlayPanel").css( "height", h ); 
}); 


</script> 
此 时 我 们 就 可 以 实现 一 个 覆盖 面板 了 。 
代码 清单 5-13 是 覆盖 面板 的 完整 代码 示例 。 


代码 清单 5-13 ” 履 兰 面板 的 完整 代码 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$("'#popupOverlayPanel').1live('popupbeforeposition', function(){ 
var h = $(window).height(); 
$("#popupOverlayPanel").css( "height", h ); 


3 


</script> 
<style> 
#popupOverlayPanel-popup { 
right: 0 !important; 
left: auto !important; 
上 
#popupOverlayPanel { 
width: 200px; 
border: 1px solid #000; 
border-right: none; 
background: rgba(0,0,0,.5); 
margin: -1px 0; 
} 
#popupOverlayPanel .ui-btn { 
margin: 2em 15px; 


</style> 
</head> 
<body> 
<section id="page1" data-ITole= page > 
<header data-Tole= header > 
<h1> 璋 出 页 面 《/h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupOverlayPanel" data-rel="popup" data-transition="slide 
data-position-to= window” data-Tole= button” data-inline="true"> 
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弹出 覆盖 面板 
</ay> 
<div data-role="popup" id="popupOverlayPanel" data-corners="false" 
data-theme="none" data-shadow="false" data-tolerance="0,0"> 
<button data-theme="a" data-icon="back” data-mini="true"> 返 回 </button> 
<button data-theme="a” data-icon="grid"” data-mini="true"> 菜 单 </button> 
<button data-theme="a"” data-icon="plus” data-mini="true"> 继 续 </button> 
</div> 
</div> 
</section> 
</body> 
</html> 


5.4 ”定制 弹出 页 面 样式 


在 开发 弹出 页 面 的 过 程 中 , 开发 者 可 以 定制 弹出 页 面 以 改善 用 户 体 验 , 包括 定制 弹出 页 面 的 
位 置 、 弹 出 页 面 的 关闭 按钮 位 置 、 弹 出 动画 效 琳 以 及 设 定 主 题 样式 等 。 


5.4.1 设 定 弹出 页 面 的 位 置 


设 定 弹 出 页 面 的 位 置 是 一 个 比较 有 用 的 功能 。 例如, 设置 弹出 提示 框 的 位 置 后 ,提示 框 会 在 
菏 个 特定 的 DOM 上 被 打开 ， 以 实现 与 这 个 DOM 相 关 的 帮助 或 提示 功能 。 

设置 弹出 页 面 位 置 的 方法 有 两 种 : 一 种 是 在 激活 弹出 页 面 的 超级 链接 按钮 中 设置 
data-position-to 属 性 ; 男 一 种 是 通过 JavaScript 方 法 对 弹出 页 面 执行 open() 操 作 ， 并 在 open() 方 
法 中 设置 打开 弹出 页 面 的 坐标 位 置 ， 这 将 在 5.5 方 中 详细 介绍 。 

data-position-to 属 性 有 3 个 取 值 ， 详 情 可 参见 表 5-3。 


表 5-3 data-position-to 属 性 及 其 含义 


属 性 什 人 义 

window 弹出 页 面 在 浏览 器 窗口 中 间 弹 出 

original 。 弹出 页 面 在 当前 触发 位 置 弹出 

#DomId 弹出 页 面 在 DOM 对 象 所 在 位 置 被 弹出 。 此 处 需要 将 DOM 对 象 id 赋 值 给 data-position-to 属 性 , 例如 


data-position-to="#Penguins" 
代码 清单 5-14 分 别 呈 现 3 种 不 同 的 提示 框 位 置 。 
代码 清单 5-14 弹出 页 面 位 置 


《!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
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</head> 
<body> 
<section id="page1" data-role="page'"> 
<header data-role="header"> 
<h1> 弹 出 页 面 </h1> 
</header> 
<div class="content" data-role="content"> 
<a href="#popupPenguins" data-rel="popup" data-role="button" 
data-position-to="#Penguins” data-inline="true"> 图 片上 </a> 
<a href="#popupWindow" data-rel="popup" data-role="button" 
data-position-to="window” data-inline="true"> 屏 幕 中 间 </a> 
<a href="#popupOrigin" data-rel="popup" data-role="button" 
data-position-to="origin”data-inline="true"> 当 前 位 置 </a> 
<div style="height:40px;" ></div> 
<img src="images/Penguins.jpg" width="350px” style="max-width:200px”alt=" 企 殷 " 
id="Penguins"/> 
<div data-role="popup" id="popupPenguins"> 
《p> 位 于 图 片上 方 的 提示 框 。 
<p> 
</div> 
<div data-role="popup" id="popupWindow"> 
《p> 位 于 屏幕 中 央 的 提示 框 。 
<p> 
</div> 
<div data-role="popup" id="popupOrigin"> 
《p> 位 于 当前 位 置 的 提示 框 。 
<p> 
</div> 
</div> 
</section> 
</body> 
</html> 


运行 上 述 代 人 码 ， 所 得 的 提示 框 效果 如 图 5-15 所 示 。 


屏幕 中 间 


i, 
Te 
| 位 于 图 片上 方 的 提示 框 。 
[了 


屏幕 中 | 位 于 当前 位 置 的 提示 框 。 


| 从 
四 1 be ' 


图 5-15 ”处 于 不 同位 置 的 弹出 页 面 
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5.4.2 ”动画 切换 效果 


在 呈现 过 程 中 ， 有 10 种 动画 弹出 效果 供 开 发 者 选择 。 当 需要 以 动画 效果 呈现 弹出 页 面 时 ， 可 
以 在 打开 页 面 的 超级 链接 按钮 中 设置 data-transition 属 性 为 相应 动画 效果 即 可 。 例 如, 设置 某 个 
弹出 页 面 以 中 央 弹 出 动画 方式 呈现 的 代码 如 下 : 

<a href="#popupSomeDialog" data-Tel= popup”data-tiransition= pop”data-Tole= button > 


弹出 页 面 
</a> 


主要 的 动画 方式 及 其 对 应 的 data-transition 属 性 如 表 5-4 所 示 。 
表 5-4 ”弹出 页 面 动画 效果 


动 男方 式 data-transition 属 性 值 
横 疝 幻灯 方式 slide 
目 上 回 下 约 灯 方式 slideup 
目下 向 上 幻灯 方式 slidedown 
中 央 弹 出 pop 
淡 入 淡出 fade 
旋转 弹出 flip 
横 加 翻转 turn 
缩小 并 以 幻灯 方式 切换 flow 
淡出 方式 显示 ， 横 癌 幻 灯 方 式 退 出 slidefade 
无 动画 效果 none 


注意 ”并非 所 有 动画 效果 都 可 以 被 移动 设备 所 支持 。 例如， 在 早期 的 Android 操 作 系 统 中 ，3D 的 
页 面 切 换 效 果 是 不 支持 的 ， 此 时 会 以 淡 入 淡出 效果 呈现 弹出 动画 效果 。 


5.4.3 弹出 页 面 主 题 


要 设置 弹出 页 面 主 题 , 可 以 使 用 theme 和 data-overlay-theme 这 两 种 属性 ， 其 中 前 者 用 于 设置 
弹出 页 面 自身 的 主题 和 人 色 板 配色 ,后 者 主要 用 于 设置 弹出 页 面 周边 的 背景 频 色 。 

实现 页 面 主题 设 定 的 代码 片段 如 下 : 

<div data-role="popup" id= popupDialog” data-overlay-theme="a" data-theme="c"> 


弹出 页 面 内 容 
</div> 


如 果 不 设 置 theme 属 性 ， 弹 出 页 面 将 继承 上 一 级 DOM 容 器 的 主题 和 色 板 设 定 。 例 如 ， 页 面 的 
theme 设 置 为 a， 那 么 如 果 不 特 别 进行 theme 主 题 设 定 ， 则 其 下 的 各 个 弹出 页 面 都 将 继承 theme 为 a 
的 设置 。 
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有 别 于 theme 属 性 继承 目 上 一 级 DOM 容 带 的 主题 设 定 ， 如 果 data-overlay-theme 没 有 设置 ， 
那么 呈现 弹出 页 面 的 时 候 ， 弹 出 页 面 的 周边 是 没有 颜色 上 覆 善 的 ， 示 例 图 如 图 $-16 左 图 所 示 。 如 果 
data-overlay-theme 属 性 设置 为 a， 则 呈现 效果 如 图 $-16 右 图 所 示 。 


弹出 页 面 
关于 弹出 对 话 框 关于 弹出 对 话 框 


弹出 页 面 特 效 是 jQuery Mobile 1.2.0 弹出 页 面 特 效 是 jQuery Mobile 1.2.0 
的 新 特性 。 的 新 特性 。 


弹出 对 话 框 是 弹出 页 面 特 效 的 一 种 ， 弹出 对 话 框 是 弹出 页 面 特 效 的 一 种 ， 


呈现 为 对 话 框 的 效果 。 呈现 为 对 话 框 的 效果 。 


图 $-16 ”弹出 页 面 主题 data-overlay-theme 设 置 效 果 


5.4.4 关闭 按钮 


在 之 前 的 弹出 图 刻 中 ,右上 角 有 一 个 关闭 按钮 ,点击 这 个 按钮 束 可 以 关闭 弹出 图 刻 , 如 图 5-17 
所 示 。 


图 5-17 弹出 图 片 
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要 实现 关闭 按钮 ， 可 以 在 div 容 硕 开 始 的 位 置 添 加 一 个 超级 链接 按钮 。 在 这 个 超级 链接 按钮 
中 ， 设 置 data-rel 属 性 为 back， 即 点 击 这 个 按钮 相当 于 返回 上 一 页 。 如 采 布 望 网 标 位 于 右上 角 ， 
则 设置 这 个 超级 链接 按钮 的 class 属 性 为 ui-btn-right, 如果 和 希望 按钮 出 现在 左上 角 , 则 设置 该 属 
性 为 ui-btn-left。 

最 后 ,可 以 设置 按钮 的 文字 和 图 标 。 如 采 和 希望 只 显示 一 个 图 标 按钮 而 不 包含 任何 文字 ， 则 设 
置 data-iconpos 属 性 为 notext。 代 码 清单 5-15 演 示 了 关闭 按钮 的 代码 。 


代码 清单 5-15 ”关闭 按钮 


<div data-ITole= popup” id="popupPhoto"> 
《1-- 关 闭 按 钮 --> 
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" 
data-iconpos="notext" class="vi-btn-right">Closex</a> 
《1-- 这 里 是 弹出 图 片 内 容 --> 
</div> 


5.5 ” 属性、 选项、 方法 和 事件 


在 开发 移动 应 用 的 时 候 ， 可 以 通过 设置 属性 、 选 项 、 方 法 以 及 绑 定 事件 啊 应 图 数 来 开发 弹出 
页 面 的 功能 。 


5.5.1 属性 


属性 定义 在 弹出 页 面 的 DOM 对 象 上 ， 用 以 设 定 弹出 页 面 的 样式 、 主 题 等 内 容 ， 如 表 5-5 
所 未 。 


表 5-5 属性 
属 性 含义 
data-corners 设置 弹出 页 面 外 形 为 直角 或 者 圆 角 。 默 认为 true， 辆 角 外 形 。 


示例 代码 : <div data-role="popup"id="popupId"data-corners="false">..</div> 
data-overlay-theme ”设置 弹出 页 面 周边 的 色 板 。 色 板 的 设 定 将 影响 周围 区 域 的 背景 颜色 ， 如 果 不 设置 ， 则 弹出 页 面 

周围 没有 苔 景色 。 

示例 代码 : xdiv data-role="popup" id="popupId"data-overlay-theme="a">..</div> 
data-position-to 设置 弹出 页 面 的 位 置 。 

默认 为 origin， 表 示人 触发 的 当前 位 置 。 

如 有 果 为 window， 则 表示 位 于 浏览 絮 中 央 。 

如 有 果 设 置 为 某 个 DOM 对 和 象 4， 则 弹出 页 面 将 会 呈现 在 这 个 DOM 对 象 上 方 。 

示例 代码 : <div data-role="popup" id="popupId"data-position-to="window">..</div> 
data-shadow 设置 弹出 页 面 周边 是 否 有 阴影 效果 。 

默认 为 true， 有 阴影 效果 。 如 果 为 false， 则 没有 阴影 效果 。 

示例 代码 : <div data-role="popup" id="popupId"data-shadow="true">..</div> 
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属 性 
data-theme 


data-transition 


注意 除了 弹出 页 


弹出 页 面 


> 


义 

设置 弹出 页 面 主题 样式 。 黑 认为 空 ， 即 主题 样式 继承 目 上 一 层 容 需 。 

示例 代码 : <div data-role="popup" id="popupId"data -theme="a">..</divy 

设置 弹出 页 面 的 动画 效 末 。 默 认为 none， 没 有 动画 效 末 。 

这 个 属性 不 是 设置 在 弹出 页 面 的 div 容 右上 ， 而 是 设置 在 打开 弹出 页 面 的 超级 链接 按钮 上 。 


示例 代码 : <a href="#popupSomeDialog" data-rel="popup" data-transition="pop" data-role= 
"button">..</a> 


面 动画 切换 效果 是 在 超级 链接 按钮 之 外 设 定 的 ， 其 他 与 弹出 页 面相 关 的 属性 


都 是 在 div 容 器 上 设置 的 。 


5.5.2 选项 


很 多 弹出 页 面 选项 与 属性 的 实现 效果 是 类 似 的 ,选项 通 弟 是 通过 JavaScript 对 所 有 弹出 页 面 进 
行 设置 ， 或 者 通过 特定 往 选 各 对 第 选 出 的 弹出 页 面 进行 设置 ， 具体 如 表 5-6 所 示 。 


选 项 
corners 
overlayTheme 
positionTo 
shadow 
theme 


transition 


在 弹出 页 面 中 
如 表 5-7 所 示 。 


选 项 
initSelector 


tolerance 


表 5-6 弹出 页 面 选 项 与 属性 对 照 表 


属 性 功 能 
data-corners 设置 弹出 窗口 外 形 为 直角 或 者 圆 角 
data-overlay-theme 设置 弹出 页 面 周边 的 色 板 ， 其 设 定 将 影响 周围 区 域 的 背景 颜色 
data-position-to 设置 弹出 页 面 的 位 置 
data- shadow 设置 弹出 窗口 以 阴影 方式 显示 
data-theme 设置 弹出 窗口 的 主题 样式 
data-transition 设置 弹出 页 面 的 动画 效果 


， 还 有 一 些 选 项 没有 对 应 的 属性 定义 , 这些 选 项 在 开发 过 程 中 经 常用 到 ,具体 


表 5-7 弹出 页 面 中 没有 对 应 属性 的 选项 列表 
人 富 义 
用 于 自 定 义 弹 出 页 面 的 CSS 选 择 器 。 设 置 initselector 之 后 ， 所 设置 的 DOM 将 被 呈现 为 弹出 页 面 
用 于 设置 弹出 页 面 距离 浏览 器 边界 的 最 小 尺寸 。 
默认 为 30,15,30,15。 
如 果 不 设置 ， 则 表示 使 用 默认 值 。 
如 果 设 置 1 个 值 ， 则 表示 四 边 的 边 距 都 采用 设置 值 。 
如 果 设 置 2 个 值 ， 则 表示 第 一 个 值 用 于 上 边 距 和 下 边 距 ， 第 二 个 值 用 于 左边 距 和 右边 距 。 
如 果 设 置 4 个 值 ， 则 表示 第 一 个 值 用 于 上 边 距 ， 第 二 个 值 用 于 右边 距 ， 第 三 个 值 用 于 下 边 距 ， 
第 四 个 值 用 于 左边 距 
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5.5.3 方法 


对 于 弹出 页 面 而 言 ,可 以 通过 JavaScript 语 句 操 作 open() 和 close() 这 两 个 方法 来 打开 和 关闭 。 
在 打开 弹出 页 面 时 ， 可 以 设置 如 表 5-8 所 示 的 这 些 选 项 。 


表 5-8 弹出 页 面 打 开 选 项 
打开 选项 合 义 
打开 弹出 页 面 的 XX 坐标 
打开 弹出 页 面 的 7 坐标 
transition 打开 弹出 页 面 的 动画 效果 
positionTo 打开 弹出 页 面 的 位 置 


X 


Y 


知 果 没有 设 首 判 出 页 面 中 的 坐标 位 置 或 positionTo 弹 出 页 面 位 置 属性 ， 则 默认 会 在 当前 浏览 


船 窗 口 的 中 央 打 开 弹 出 页 面 。 这 与 通过 超级 链接 按钮 打开 的 弹出 页 面 不 同 , 通过 超级 链接 按钮 打 
开 的 弹出 页 面 默 认 位 于 超级 链接 按钮 的 上 方 。 


5.5.4 事件 


打开 和 关闭 弹出 页 面 时 ， 将 会 触发 弹出 页 面 事件 ， 具 体 如 表 5-9 所 示 。 
表 5-9 ”弹出 页 面 事件 


事 件 含义 
popupbeforeposition 在 弹出 页 面 已 经 被 处 理 完 成 而 准备 呈现 之 前 ， 将 会 触发 此 事件 。 
对 于 视频 、 图 片 、 地 图 等 的 大 多 尺寸 设置 操作 都 在 这 个 事件 中 完成 
popupafteropen 弹出 页 面 完全 呈现 完成 时 ， 将 会 触发 此 事件 


popupafterclose 弹出 页 面 完 全 关闭 时 ， 将 会 触发 此 事件 


在 将 触 屏 应 用 在 手机 之 前 ， 每 部 手机 至 少 拥有 一 个 数字 键盘 或 者 QWERTY 键 盘 用 以 输入 
电话 号 人 码 或 者 文字 。 而 在 现在 的 大 多 移动 设备 上 , 我 们 可 以 直接 用 手 在 触摸 屏 上 “书写 ”, 通 
过 在 触摸 屏 上 点 击 或 者 在 虚拟 键盘 上 输入 ,或 者 基于 手势 回 移 动 设备 发 出 指令 ， 而 移动 设备 
会 啊 应 这 些 操作 指令 。jQuery Mobile 文 持 触 探 交 互 ， 基 于 此 ， 开 发 者 可 以 开发 出 不 同 的 触 控 
交互 应 用 。 

在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

口 轻 击 ( tap ) 或 者 按 住 ( taphold ) 操作 ; 

口 轻 扫 屏 闪 操作 ; 

口 虚拟 鼠标 事件 。 

此 外 , 还 有 一 些 其 他 的 触 控 操作 ,例如 基于 虚拟 键盘 执行 输入 操作 , 但 这 些 操作 是 基于 移动 
设备 操作 系统 或 输入 法 实现 的 ， 超 出 了 jQuery Mobile 的 讨论 范围 ， 这 里 就 不 介绍 了 


6.1 触 探 事件 


当 使 用 移动 设备 进行 触 控 操作 时 , 最 常用 的 就 是 轻 击 、 按 住 屏幕 或 者 手势 操作 ,jQuery Mobile 
可 以 通过 绑 定 的 触 控 事件 来 响应 使 用 关 的 特定 触 控 行为 6 


6.1.1 轻 击 与 按 住 


轻 击 操作 就 是 快速 触 碰 触摸 屏 。 当 触 碰 操作 结束 时 ， 会 触发 tap 事 件 。 如 采 按 住 触 醒 屏 不 放 ， 
就 会 触发 taphold 事 件 。 虽然 tap 被 称 为 轻 击 ， 但 是 其 实 与 施加 在 触摸 屏 上 的 力 是 没有 关系 的 ， 只 
是 “ 碰 ” 了 一 下 屏幕 。 

下 面 的 代码 展现 了 绑 定 与 执行 tap 事 件 和 taphold 事 件 的 方法 : 

$('#page1' ).live('tap', function(){ 


$.mobile.changePage( '#page2' ); 
由; 


$('#page1' ) .1ive('taphold' ,function(){ 
alert('taphold 事 件 被 触发 '); 
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一 般 情 况 下 ，tap 或 taphold 被 绑 定 在 某 个 DOM 容 器 上 。 在 这 个 程序 中 ,tap 和 taphold 事 件 被 
绑 定 在 页 面 上 。 当 触发 tap 事 件 时 ， 页 面 跳 转 到 另 一 个 页 面 。 当 触发 tapho1d 事 件 时 ， 则 会 发 出 一 
个 消息 对 话 框 ， 提 示 “taphold 事 件 被 触发 ”。 

轻 击 与 按 住 的 完整 代码 示例 如 代码 清单 6-1 所 示 。 


代码 清单 6-1 轻 击 与 按 住 事件 的 代码 示例 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type= text/javascript'> 
$('#page1' ).live('tap', function(){ 
$.mobile.changePage( '#page2' ); 
}); 


$('#page2' ) .live('tap', function(){ 
$.mobile.changePage( '#page1' ); 
}); 


$('#page1' ).live('taphold' ,function(){ 
alert('taphold 事 件 被 触发 ' ); 
}); 


$('#page2' ).live('taphold' ,function(){ 
$.mobile.changePage( '#about' ); 
})); 
</script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1>Tap 事 件 处 理 </h1> 
</header> 
<div class="content" data-role="content"> 
轻 击 页 面 进入 下 一 页 。<br/> 
按 住 不 放 ， 打 开关 于 对 话 框 
</div> 
<footer data-role="footer"> 
</footer> 
<«/section> 
<section id="page2" data-role="page"> 
<header data-role="header"> 
<h1>Tap 事 件 处 理 </h1> 
</header> 
<div class="content" data-role="content"> 
轻 击 页 面 返 回 前 一 页 。 
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</div> 
<footeT data-role="footer"> 
</footer> 
<«/section> 
<div id="about' data-role='dialog'> 
<div data-role="header"> 
<h1> 关 于 本 程序 </h1> 
</div> 
<div data-role='content'> 
演示 轻 击 触 控 事件 响应 
</div> 
</div> 
</body> 
</html> 


在 不 同 的 移动 设备 浏览 帮 中 ，pagel 和 page2 所 触发 的 taphold 事 件 对 应 的 处 理 程序 是 不 同 的 : 
page1 的 taphold 触 发 一 个 alert 对 话 框 ( 如 图 6-1 左 图 所 示 )，page2 将 触发 一 个 天 于 对 话 框 ( 如 图 6-1 
右 图 所 示 )， 这 两 种 对 话 框 的 执行 效果 也 是 不 同 的。 


5 


国 192.168.1.100/jqm/Sectio 


关于 本 程序 


演示 轻 击 触 控 事 件 响应 


taphold 事 件 被 触发 


OK 


图 6-1 通过 taphold 事 件 触发 消息 框 或 对 话 框 


在 Android 4.0.3 中 , 在 page1 中 触发 taphold 事 件 后 ， 会 激活 一 个 alert 消 息 框 。 如 采用 户 需要 天 
闭 这 个 消息 框 ， 则 要 再 次 点 击 OK 按 钮 。 在 page? 中 触发 taphold 事 件 后 ， 会 打开 一 个 关于 对 话 框 。 
当 用 户 的 手 从 屏幕 上 离开 后 ， 就 会 自动 天 闭关 于 对 话 框 。 而 这 个 关闭 操作 有 别 于 之 前 page1 中 的 
消 旦 框 ， 不 和 需要 通过 点 击 按钮 就 可 以 实现 。 

在 不 同 的 浏览 各 中 执行 taphold 事 件 触发 程序 ， 对 话 框 的 执行 效果 也 可 能 会 有 所 不 同 。 有 别 
于 之 前 Android 4.0.3 虚 拟 设 备 中 的 执行 效果 ,在 Chrome、Internet Explorer 和 Firefox 中 , 当 释 放 page2 
的 鼠标 之 后 ， 对 话 框 并 不 会 日 动 消失 ,使 用 者 需要 点 击 关 闭 按钮 才能 关闭 这 个 对 话 框 。 
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6.1.2 轻 扫 


在 jQuery Mobile 中 ， 轻 扫 操 作 (swipe ) 是 用 手指 或 手写 笔 快 速 在 触摸 屏 上 问 左 或 回 右 划 过 。 
在 用 户 以 轻 扫 方 式 操作 程序 时 ， 会 触发 swipeleft 事 件 或 者 swiperight 事 件 。 

代码 清单 6-2 演 示 了 将 轻 扫 事件 与 页 面 绑 定 的 示例 代码 。 回 左 轻 扫 时 ， 则 触发 对 于 DOM 对 象 
id 为 1nkDialog 的 超级 链接 的 点 击 操 作 ， 疝 右 轻 扫 时 则 更 新 页 面 到 为 一 个 页 面 。 


代码 清单 6-2 ” 轻 扫 事件 示例 代码 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type= text/javascript'> 
$('#page1' ).live('swiperight', function(){ 
$.mobile.changePage( '#page2' ); 
}); 


$('#page2').live('swiperight', function(){ 
$.mobile.changePage( '#page1' ); 
}); 


$('#page1' ).live('swipeleft',function( ){ 
$('#lnkDialog' ).click(); 
}); 


$('#page2' ).live('swipeleft',function(){ 
$('#lnkDialog' ).click(); 
}93 
</script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
<h1>swipe 事 件 处 理 </h1> 
</header> 
<div class="content" data-role="content"> 
向 右 滑动 页 面 进入 下 一 页 。《bT/> 
向 左 滑 动 页 面 ， 打 开关 于 对 话 框 
</div> 
<footer data-role="footer"> 
</footeT> 
<«/section> 
<section id="page2" data-role="page"> 
<header data-role="header"> 


100 第 6 和 草 ” 触 控 交 互 


<h1>swipe 事 件 处 理 </h1> 
</header> 
<div class="content" data-role="content"> 
向 右 滑动 页 面 进入 前 一 页 。《bT/> 
向 左 滑 动 页 面 ， 打 开关 于 对 话 框 
</div> 
<footeT data-role="footer"> 
</footeTy> 
<«/section> 
<div id="about' data-role='page'> 
<div data-role="header"> 
<h1> 关 于 本 程序 </h1> 
</div> 
<div data-Tole= content ”data-theme= c > 
演示 Swipeleftg&swiperight 触 控 事 件 响应 
</div> 
</div> 
<a id='lnkDialog' href="#about" data-rel="dialog" data-transition="pop" 
style='display:none;' ></a> 


</body> 
</html> 
在 打开 这 段 代码 的 第 一 个 页 面 时 , 向 右 轻 扫 则 可 以 进入 下 一 个 页 面 , 而 向 左 轻 扫 则 会 打开 关 
于 对 话 框 。 


在 触 控 程序 中 ， 如 果 打 开 下 一 个 页 面 ， 则 可 以 通过 changePage() 方 法 实现 。 例 如 ， 下 面 的 代 
码 将 可 以 使 页 面 跳 转 到 #pagel: 

$.mobile.changePage( '#page1' ); 

如 条 和 希望 通过 触 控 操作 打开 一 个 指 回 对 话 框 的 链接 ， 并 且 这 个 打开 操作 中 还 能 定义 特定 
的 页 面 切换 特效 , 那 就 需要 一 些 额 外 的 技巧 。 因为 jQuery Mobile 对 话 框 不 能 使 用 changePage() 
汝 数 打 开 ， 而 必须 使 用 超级 链接 以 Ajax 的 方式 打开 ， 所 以 需要 使 用 JavaScript 模 拟 点 击 这 个 超 
级 链接 。 

站 完 ， 建立 一 个 不 可 见 的 超级 链接 , 设置 这 个 超级 链接 以 对 话 框 的 方式 打开 页 面 。 设置 超级 
链接 不 可 见 ， 可 以 通过 设置 style 属 性 为 display:none; 来 实现 。 例 如 ， 下面 的 超级 链接 是 一 个 不 
可 见 的 链接 ， 点 击 之 后 将 以 pop 方 式 打 开 : 

<a id='lnkDialog' href="#about" data-Tel= dialog” data-transition="pop" style='display:none;'></a> 

然后 , 在 触 控 操作 所 绑 定 的 代码 中 通过 JavaScript 实 现 对 这 个 不 可 见 超级 链接 的 点 击 , 就 可 以 
打开 对 话 框 了 : 


$('#page1' ) .live('swipeleft',function(){ 
$('#lnkDialog' ).click(); 
}); 


6.2 虚拟 鼠标 事件 
虚拟 鼠标 事件 用 以 对 移动 设备 触 控 行为 进行 响应 。 有 别 于 前 面 所 提 到 的 触 控 事 件 , 虚拟 鼠标 
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事件 能 够 提供 更 具体 的 有 关 触 控 的 操作 行为 信息 , 例如 具体 的 触 控 行为 以 及 不 同 坐标 系 下 的 触 控 
坐标 位 置 ， 因 此 ， 开 发 者 可 以 据 此 定制 不 同 的 触 控 事 件 啊 应 程序 。 主 要 的 虚拟 鼠标 事件 如 表 6-1 
所 示 。 


表 6-1 虚拟 鼠标 事件 


事 件 含义 
vmouseover 在 触 控 或 者 鼠标 滑动 于 DOM 容 器 之 上 时 触发 
vmouseout 在 触 控 或 者 鼠标 滑动 离开 DOM 容 带 时 触发 
vmousedown 开始 触摸 或 者 鼠标 被 按 下 时 触发 
vmousemove 触摸 请 动 或 鼠标 移动 时 触发 
vmouseup 触摸 结束 或 鼠标 按键 被 释放 时 触发 
vclick 触摸 结束 或 鼠标 按键 被 释放 时 触发 。 

vclick 事 件 通 常 在 vmouseup 事 件 后 的 300ms 触 发 

vmousecancel 触 控 事件 中 发 起 mousecancel 事 件 时 触发 。 


例如 ， 非 常 快速 地 执行 轻 扫 操 作 时 


虚拟 鼠标 事件 与 触 控 事 件 有 所 不 同 : 触 控 事件 通常 并 不 会 返回 用 户 操作 的 位 置 , 虚拟 鼠标 事 
件 在 触发 的 时 候 ， 不 但 可 以 获得 当前 使 用 者 的 行为 ， 还 可 以 获得 触发 虚拟 鼠标 事件 的 坐标 位 置 。 
根据 所 处 位 置 的 不 同 , 可 以 获得 当前 所 在 页 面 、 当 前 屏 才 以 及 当前 窗口 区 域 的 坐标 位 置 。 虚 拟 鼠 
标 坐 标的 定义 如 表 6-2 所 示 。 


表 6-2 ”虚拟 鼠标 坐标 的 定义 


坐 ” 标 含 义 
pageX 当前 HTML 页 面 横 坐标 
pageY 当前 HTML 页 面 纵 坐标 
screenX 当前 屏 大 横 坐 标 
screenY 当前 屏 硕 纵 坐 标 
clientX 当前 窗口 区 域 的 横 坐 标 
clientY 当前 窗口 区 域 的 纵 坐标 


代码 清单 6-3 展 示 了 触 控 操作 获得 不 同 坐 标 体系 下 的 坐标 的 示例 代码 。 为 了 能 够 更 加 清晰 
地 表现 坐标 体系 的 差异 ， 我 们 需要 展示 页 面 发 生 滚屏 之 后 的 坐标 变化 。 所 以 ， 在 代码 清单 6-3 
的 示例 程序 中 ， 我 们 加 入 了 500 个 像素 高 度 的 <div> ， 并 在 最 后 一 屏 的 底部 出 现 “ 内 容 底部 ” 
字样 。 

通常 ,在 页 面 开 始 的 一 屏 中 ,各 个 坐标 体系 的 数值 是 一 样 的 , 但 是 随 着 输出 内 容 的 增加 ， 一 
旦 出 现 滚屏 ， 移 动 设 备 浏 览 需 的 7 难 标 值 就 会 不 同 。 有 趣 的 是 ， 通 常 移动 设备 浏览 句 都 会 全 屏 呈 
现 ， 所 以 X 八 标的 数值 一 般 来 说 在 各 个 坐标 体系 下 都 是 一 样 的 。 
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代码 清单 6-3 ” 触 控 操作 获得 不 同 坐 标 体系 下 坐标 的 代码 


《!DOCTYPE html> 
<html> 
<head> 
<meta Charset= utf-8 > 
<meta name= Viewport ”content= width=device-width，jinitial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type='text/javascript'> 
$('#page1' ) .live('vmouseup', function(event, ui){ 
alert(" 当 前 点 击 位 置 "+ 
"An “+ 
"\npageX: “+event .pageX+ 
'\npageY: “+event .pageY+ 
"An “+ 
'\nscreenX: “+event .SCTeenX+ 
'\nscreenY: +event .SCTeenyY+ 
"An “+ 
'\nclientX: “+event .clientX+ 
'\nclientY: “+event.clientY) ; 
}); 
</script> 
</head> 
<body> 
《Section id="page1" data-role="page"> 
<header data-role="header"> 
<h1>vMouse 事 件 处 理 </h1> 
</header> 
<div class="content" data-role="content"> 
轻 击 页 面 ， 显 示 点 击 位 置 。 
</div> 
<div style="height:500px;"></div> 
内 容 底 部 
<footer data-role="footer"> 
</footer> 
</section> 
</body> 
</html> 


运行 上 述 代码， 得 到 的 运行 结果 如 图 6-2 所 示 。 


注意 ”仔细 比较 会 发 现 , 代码 清单 6-3 中 的 字符 \n 并 没有 在 图 6-2 中 显示 出 来 。 在 JavaScript 中 ，Nn 
是 一 个 转 义 字符 ， 表 示 为 换行 ， 所 以 所 有 标记 为 \n 之 后 的 文字 都 显示 在 新 的 一 行 。 而 连 
续 两 个 \n 则 显示 为 两 向 话 中 间 多 了 一 个 空 行 。 


从 图 6-2 中 可 以 看 出 , 不同 坐 标 体系 的 尺寸 是 不 同 的 。 在 移动 设备 中 ,XX 坐标 的 位 置 通常 都 是 
问 定 的 ， 这 也 是 由 于 移动 设备 中 浏览 带 是 以 全 屏 方 式 显 示 的 。 如 来 不 是 全 屏 方 式 ， 那 么 X 华 标 也 
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会 不 同 。 同 样 ， 对 于 移动 说 备 训 览 可 ,由 于 训 览 带 是 满 屏 显示 的 ， 所 以 获得 的 屏 才 坐标 和 窗口 区 
域 坐标 是 一 致 的 。 


当前 点 击 位 置 当前 点 击 位 置 


pageX: 109 
pageY: 125 


ScreenX: 109 
ScreenyY']124 


clientX: 109 
clientY: 124 


pageXx: 123 
pageY: 221 


screenX: 123 
ScreenyY']17 


clientX: 123 
clientY: 117 


图 6-2 ”第 一 屏 点 击 的 坐标 位 置 与 最 后 一 屏 的 鼠标 位 置 


当 页 面 尺 寸 超 过 移动 设备 浏览 句 一 屏 的 尺寸 时 ， 随 着 页 面 滚动 鼠标 的 Y 坐 标 在 不 同 坐 标 体系 
中 会 变 得 不 同 。 在 图 6-1 中 ， 当 屏幕 被 拖 动 到 最 后 一 屏 后 ，pageY 的 坐标 与 screenY 和 clientY 的 从 
标 是 不 同 的 ， 前 者 为 221， 而 后 面 两 个 均 为 117。 这 是 由 于 pageY 坐 标 是 根据 页 面 的 位 置 计算 来 的 ， 
而 其 他 两 个 则 是 根据 移动 设备 浏览 从 屏幕 坐标 或 当前 窗口 区 域 坐 标 来 计算 的 。 


按 ” 钮 


按钮 是 用 户 界面 交互 中 最 常用 到 的 组 件 。 通过 点 击 按钮 ,可 以 提交 内 容 , 或 者 展开 下 一 个 对 
话 杠 。 由 于 Web 移 动 应 用 页 面 是 通过 网 页 的 形式 展现 的 ， 所 以 这 里 接触 到 的 按钮 除了 具有 传统 网 
页 开发 按钮 的 功能 外 ,一些 超级 链接 也 会 以 按钮 的 样式 呈现 ,而 这 正 是 jQuery Mobile 按 钮 的 特别 
Te 

在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

口 内 联 按钮 ; 

口 按钮 图 标 ; 

口 Mini 按 钮 ; 

口 按钮 组 ; 

口 开发 按钮 功能 的 属性 、 选 项 、 方 法 和 事件 ; 

口 目 定义 按钮 。 


7.1 基本 概念 


在 Web 移 动 应 用 中 ,按钮 有 两 种 常见 的 形式 : 一 种 是 表单 按钮 ， 例 如 实现 提交 、 清 除 等 功能 
的 按钮 。 另 一 种 是 将 超级 链接 美化 成 按钮 的 样式 ， 点 击 后 页 面 会 跳 转 到 新 的 一 页 。 

按钮 美化 大 体 遵 循 如 下 两 个 原则 。 

口 默认 的 按钮 类 型 或 图 片 按 钮 ， 例 如 input type="image"， 会 自动 转化 为 按钮 样式 。 

口 对 于 超级 链接 添加 按钮 属性 data-role="button"， 就 可 以 将 超级 链接 美化 为 按钮 的 样式 。 

表 7-1 列 出 了 会 被 美化 的 各 种 按钮 。 


表 7-1 按钮 标签 定义 


类 别 按钮 代码 

超级 链接 <a href="#" data-role="button"> 超 级 链接 按钮 (/a> 
按钮 <button> 表 单 按钮 /buttony 

提交 按钮 <input type="submit"> 提 交 按钮 </input> 


重 置 按钮 <input type= TeSset > 重 置 按 馈 /inputy> 
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代码 清单 7-1 展 示 了 超级 链接 按钮 和 表单 按钮 的 不 同 实现 。 在 这 个 示例 中 ， 显 示 “ 关 于 ” 
字样 的 按钮 是 一 个 超级 链接 按钮 ， 这 里 通过 声明 data-role 属 性 为 button 来 美化 超级 链接 样式 
按钮 : 


<a href="#about” data-role="button"> 关 于 </a> 


代码 清单 7-1 表单 按钮 与 超级 链接 按钮 的 实现 示例 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name= Viewport ”content= width=device-width，jinitial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
function OnBtnClick() 
{ 
alert( 按钮 被 点 击 ) 
} 
</script> 
</head> 
<body> 
<Section id="page LayoutButton” data-role="page” data-title=" 内 置 按 钮 样式 "> 
<header data-role="header"> 
《<h1> 内 置 按钮 样式 </h1> 
</header> 
<div class="content" data-role="content"” > 
<button onClick="OnBtnClick();"> 表 单 按钮 </button> 
<a href="#about” data-role="button"> 关 于 </a> 
</div> 
</section> 
<div id="about" data-role="dialog"> 
<div data-role="header"> 


<h1> 关 于 我 们 </h1> 
</div> 
<div data-Tole="content "> 演示 不 同 按钮 功能 </divy> 
</div> 
</body> 


</html> 
运行 上 述 代码 ， 得 到 的 结果 如 图 7-1 所 示 。 


邓 


一 


内 置 按钮 样式 


图 7-1 ”链接 按钮 和 表单 按钮 样式 
从 图 7-1 中 可 以 看 到 ， 表 单 按钮 和 超级 链接 按钮 的 呈现 效果 完全 相同 。 


7.2 ”内 联 按钮 


默认 情况 下 ， 每 个 按钮 几乎 占 满 整 个 移动 设备 屏幕 的 宽度 ,一 行 只 能 容纳 一 个 按钮 ， 这 在 屏 
幕 较 小 的 移动 设备 下 便于 触 控 操 作 ， 而 在 屏幕 较 大 的 移动 设备 中 , 按钮 矿 寸 承 显 得 过 大 了 ， 而 内 
联 按钮 能 有 效 改 善 这 样 的 用 户 体验 。 

通常 ， 内 联 按钮 的 宽度 受 按钮 文字 的 数量 影响 。 如 采 按 钮 中 的 文字 较 少 ， 那 么 内 联 按 钮 
的 宽度 也 会 相应 变 罕 。 这 样 多 个 内 联 按钮 就 可 以 方便 地 并 列 排 在 一 起 ， 而 不 是 和 目 上 而 下 依次 
排列 。 

在 按钮 标签 内 部 将 data-inline 属 性 设置 为 true, 则 按钮 宽度 将 适应 按钮 文字 宽度 而 缩小 。 而 
按钮 排列 顺序 也 不 再 只 是 按照 自 上 而 下 的 顺序 排列 , 在 一 行 能 够 容纳 多 个 按钮 的 情况 下 按钮 将 按 
照 自 左 向 右 的 顺序 依次 排列 。 

内 联 按钮 的 代码 片段 如 下 ， 呈 现 效 果 如 图 7-2 所 示 : 


<button data-inline="true”onClick="OnBtnClick();"> 表 单 按钮 </button> 
<a href="#about" data-role="button”data-inline="true"> 关 于 </a> 
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$ 


国 192.168.1.100/jqm/Sectio 至 


内 联 按钮 样式 


-二 


图 7-2 ”内 联 按钮 


7.3 ”按钮 图 标 
jQuery Mobile 定 义 了 一 个 data-icon 属 性， 基于 这 个 属性 ,程序 可 以 呈现 标准 化 的 按钮 图 标 。 
这 是 按钮 图 标的 代码 片段 : 
<button data-icon="arrow-1"> 向 左 </button> 


所 呈现 的 按钮 样式 如 图 7-3 所 示 。 


向 堪 


图 7-3” 问 左 按钮 


7.3.1 按钮 图 标 样式 


data-icon 可 以 指定 不 同 的 属性 值 ， 不 同 的 属性 值 所 呈现 的 图 标 也 不 同 ， 具 体 如 表 7-2 所 示 。 
表 7-2 ”data-icon 的 值 及 其 含 》 


属 性 什 全 义 
arrow-1 向 左 按钮 。 示 例 代 码 : 
<button data-icon=”arrow-1”> 向 左 </button> 
效果 为 : 
arrow-r 向 右 按 钮 。 示 例 代 码 : 


<button data-icon="arrow-r"> 向 右 </button> 
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属 性 值 


ArrOW-r 


AarrOw-U 


arrow-d 


delete 


plus 


minus 


check 


gear 


refresh 


forward 


back 


效果 为 : 
向 右 
向 上 按钮 。 示 例 代 码 : 
<button data-icon="arrow-u"> 向 上 </button> 
效果 为 : 
向 上 
向 下 按钮 。 示 例 代 码 : 
<button data-icon="arrow-d"> 向 下 </button> 
效果 为 : 


向 下 


删除 按钮 。 示 例 代 码 : 
<button data-jicon= "dejete" > 删除 </puttony> 
效果 为 : 

删除 
加 号 按钮 。 示 例 代码 : 
<button data-icon="plus"> 加 号 </button> 
效果 为 : 
减 写 按钮 。 示 例 代码 : 
<button data-icon="minus"> 减 号 </button> 
效果 为 : 

碱 号 
含 查 按 钮 。 示 例 代 码 : 
<button data-icon="check"> 检 查 </button> 
效果 为 : 

检查 
齿轮 按钮 。 示 例 代码 : 
<button data-icon="gear"> 疮 轮 </button> 
效果 为 : 
刷新 按钮 。 示 例 代码 : 
<button data-icon="Tefresh"> 刷 新 /puttony> 
效果 为 : 

刷新 
癌 前 按钮 。 示 例 代码 : 
<button data-icon="forward"> 向 前 </button> 
效果 为 : 

向 前 
问 后 按钮 。 示 例 代码 : 
<button data-icon="back"> 向 后 </button> 


效果 为 : 
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属 性 值 合 义 
grid 网 格 按钮 。 示 例 代码 : 
<button data-icon="grid"> 网 格 </button> 
效果 为 : 
琵 网 格 
star 星 形 按钮 。 示 例 代 码 : 
<button data-icon="star"> 星 形 </button> 
效果 为 : 
© 星 形 
alert 警告 按钮 。 示 例 代 码 : 
<button data-icon="alert"> 警 告 C/buttony> 
效果 为 : 
A 涯 吉 
info 言 息 按钮 。 示例 代码 : 
<button data-icon="info"> 信 息 </button> 
效果 为 : 
0 信息 
home 主页 按钮 。 示 例 代码 : 
<button data-icon="home"> 主 页 </button> 
效果 为 : 
《 主页 
search 查找 按钮 。 示 例 代 码 : 
<button data-icon="search"> 杜 找 </button> 


效果 为 : 


查找 


图 7-4 是 在 Android 虚 拟 设 备 中 所 呈现 的 按钮 图 标 样 式 。 


正常 按钮 样式 


图 7-4 ”按钮 图 标 
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7.3.2 ”按钮 图 标 位 置 
通过 data-iconpos 属 性 ， 可 以 设置 图 标 在 按钮 中 的 位 置 ， 具 体 如 表 7-3 所 示 。 


表 7-3 ”按钮 图 标 位 置 


图 标 位 置 含义 
right 图 标 位 于 右 侧 

top 图 标 位 于 上 方正 中 

bottom 图 标 位 于 下 方正 中 

notext 只 显示 图 标 而 不 显示 按钮 文字 


代码 清单 7-2 演 示 了 不同 的 按钮 图 标 位 置 的 代码 。 
代码 清单 7-2 按钮 图 标 位 置 代码 厂 段 


<div class="content" data-role="content"> 
<button data-icon="home” data-iconpos="left"> 主 页 </button> 
<button data-icon="home” data-iconpos="right"> 主 页 </button> 
<button data-icon="home” data-iconpos="top"> 主 页 </button> 
<button data-icon="home"” data-iconpos="bottom"> 主 页 </button> 
<div style="height:15px;" ></div> 
<hr> 
notext 类 型 按 鱼 : 
<button data-icon="home” data-iconpos="notext"> 主 页 </button> 
</div> 


在 Android 虚 拟 设备 上 运行 上 述 代 码 ， 得 到 的 效 末 如 图 7-5 所 示 。 


和 


| 192.168.1.100/jqm/Sectio 到 


按钮 位 置 


notext 类 型 按钮 : 


图 7-5 ”按钮 图 标 位 置 
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如 果 只 设置 图 标 ， 而 不 希望 包括 任何 文字 ， 则 可 以 设置 属性 data-iconpos 为 notext。 在 图 7-5 
中 ， 最 后 一 个 按钮 就 是 这 种 样式 。 


7.4 mini 按钮 


在 一 些 场 景 中 ( 例如 按钮 和 其 他 表单 组 件 被 放置 在 折合 内 容 块 中 )， 由 于 移动 设备 日 身 的 屏 
禹 尺寸 限制 , 加 之 折 僵 内 容 块 的 显示 区 域 比 移动 设备 浏览 旧 的 显示 区 域 小 , 如 果 使 用 标准 尺寸 的 
按钮 和 表单 组 件 ， 那 么 内 容 布局 和 呈现 将 拥挤 而 不 便 操 作 ， 为 此 可 以 通过 设置 data-mini 属 性 为 
true 的 方式 ， 将 按钮 或 者 表单 组 件 以 mini 访 陈 呈 现 ， 如 图 7-6 所 示 。 


mini 按 钮 样式 正常 按钮 样式 


图 7-6” 左 图 为 mini 按 钮 ， 右 图 为 正常 尺寸 按钮 


<button data-mini="true” data-icon="home"> 主 页 </button> 

当然 ， 其 他 表单 元 素 也 可 以 设置 为 mini 尺 寸 ， 比 如 文本 框 和 复 选 框 。 

从 jQuery Mobile 1.2.0 开 始 ， 工 具 栏 中 的 按钮 将 默认 以 mini 方 式 显 示 。 而 在 之 前 的 jQuery 
Mobile 1.1.1 或 更 早 的 版 本 中 ,默认 的 尺寸 是 正 第 尺寸 ， 除非 开发 者 特别 设置 按钮 为 mini 方 式 。 在 
涉及 将 jQuery Mobile 早 期 程序 迁移 到 jQuery Mobile 1.2.0 或 之 后 版 本 的 时 候 , 开发 者 需要 注意 这 个 


变化 。 


7.5 ”按钮 组 


一 组 相关 的 按钮 可 以 通过 按钮 组 的 方式 分 组 排列 在 一 起 , 经 过 分 组 之 后 的 按钮 可 以 棋 回 排列 
或 纵向 排列 。 
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实现 按钮 组 的 效 采 很 简单 : 在 div 容 硕 中 ， 将 data-Tole 属 性 设置 为 controlgroup ， 即 可 将 一 
组 按钮 以 纵 癌 方式 排列 在 一 起 。 如 采 和 希望 以 模 同 方式 排列 ， 只 知 设 置 data-type 属 性 为 horizontal 
即 可 。 

纵 癌 按钮 组 的 示例 代码 如 下 : 


<div data-role="controlgroup"> 
<a href="#" data-role="button”3> 链 接 按 钮 </a> 


<button > 表单 按钮 </button> 
</divy> 


横 回 按钮 组 的 示例 代码 如 下 : 


<div data-role="controlgroup" data-type="horizontal"> 
<a href="#" data-role="button”> 链 接 按 钮 </a> 
<button > 表单 按钮 </button> 
</div> 
如 果 和 需要 将 按钮 组 设置 为 mini 样 式 ， 则 需要 在 按钮 组 容 带 中 添加 data-mini="true" 属 性 : 


<div data-role=" ControlLlgroup ”data-type= horizontal data-mini= true > 


上 述 代 码 的 运行 效果 如 图 7-7 所 示 。 


按钮 组 样式 按钮 组 样式 


纵向 按钮 组 : 纵向 按钮 组 : 
链接 按钮 


表单 按钮 
横向 按钮 组 : 


檬 向 按钮 组 : 链接 按钮 。 表单 技 钮 


链接 按钮 表单 按钮 


图 7-7” 左 侧 为 标准 尺寸 按钮 组 ， 右 侧 为 mini 按 钮 组 


在 按钮 组 中 , 不 但 可 以 使 用 文字 按钮 ， 同样 也 可 以 在 按钮 中 加 入 图 标 , 或 者 使 用 纯粹 的 图 标 


抽 亿 。 
在 jQuery Mobile 1.1.1 或 者 之 前 版 本 的 移动 Web 应 用 中 , 不 建议 使 用 无 文字 的 图 标 按钮 。 因 为 


无 文字 的 图 标 按 钮 尺寸 非常 小 , 不 方便 用 户 的 触 控 操作 。 这 个 问题 在 jQuery Mobile 1.2.0 之 后 的 版 
本 得 到 改善 。 如 果 你 使 用 的 是 jQuery Mobile 最 新 版 本 ， 建 议 根 据 上 自己 的 应 用 场景 做 一 下 测试 。 代 


人 码 清 单 7-3 演 示 了 无 文字 的 图 标 按钮 组 示例 代码 。 
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代码 清单 7-3 无 文字 的 图 标 按钮 组 


<div class="content" data-role="content"> 
按钮 组 图 标 : 
<div style="height:10px" ></div> 
<div data-role="controlgroup" data-type="horizontal"” > 
<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext"> 
Up 
</a> 
<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext"> 
Down 
</a> 
<a href="index.html" data-role="button" data-Icon= delete” data-iconpos="notext"> 
Delete 
</a> 
</div> 
</div> 
</div> 


在 jQuery Mobile 1.2.0 及 后 续 版 本 环境 下 执行 代码 清单 7-3， 得 到 的 运行 结果 如 图 7-8 所 示 。 


按钮 组 样式 


图 7-8 图标 按钮 组 


7.6 按钮 属性 、 选 项 、 方 法 与 事件 


在 写 HIML 页面 的 时 候 ， 开 发 者 可 以 通过 设 定 属性 控制 按钮 的 呈现 样式 ， 也 可 以 通过 
JavaScript 根 据 上 下 文 环境 对 按钮 进行 样式 控制 和 事件 啊 应 。 下 面 我 们 就 从 属性 、 选 项 、 方 法 和 事 
件 这 4 个 方面 来 介绍 一 下 按钮 的 设 定 。 

7.6.1 属性 
按钮 属性 是 定义 在 按钮 容器 内 部 的 属性 ， 用 于 确定 所 使 用 的 按钮 样式 ， 如 直角 按钮 或 者 圆 角 
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按钮 、 按 钮 图 标 样 式 、 按 钮 图 标 位 置 、 按 钮 配色 风格 等 ， 具 体 如 表 7-4 所 示 。 
表 7-4 ”按钮 属性 


属 性 含义 
data-corners 设置 按钮 外 形 为 下 角 或 者 贺 角 ， 默 认为 true， 表 示 圆 角 外 形 。 
示例 代码 : 
<button data-corners="false"> 按 钮 </button> 
data-icon 设置 按钮 图 标 样 式 ， 默 认为 nul1， 表 示 不 显示 网 标 。 
示例 代码 : 
<button data-Icon= home > 按钮 </button> 
data-iconpos 设置 图 标 按钮 位 置 ， 默 认为 le 人 t， 表 示 图 标 位 于 按钮 左 侧 。 
示例 代码 : 
<button data-iconpos="Tight”data-icon="home"> 按 钮 /buttony> 
data-iconshadow 设置 图 标 按钮 是 否 呈 现 阴 影 效 果 ， 黑 认为 true， 表 示 显 示 阴 影 效 末 。 
示例 代码 : 
<button data-mini="true” data-icon="home"> 按 钮 /buttony> 
data-inline 设置 按钮 是 否 为 内 联 按钮 ， 黑 认为 nul1， 表 示 不 局 用 内 联 按钮 样式 。 
示例 代码 : 
<button data-inline="true"> 控 钮 人 /buttony> 
data-mini 设置 按钮 是 否 为 mini 尺 寸 ， 默认 为 false， 表 示 正 常人 尺寸 显示 。 
示例 代码 : 
<button data-mini="true" > 按钮 </button> 
data-shadow 设置 按钮 为 阴影 方式 显示 ， 黑 认为 true， 表 示 显 示 按 钮 外 侧 阴 影 。 
示例 代码 : 
<button data-shadow= "false" > 按钮 /buttony> 
data-theme 设置 按钮 显示 theme 风 格 ， 默 认为 null1， 表 示 继 承 上 层 theme 风 格 。 
示例 代码 : 


<button data-theme="c" > 按钮 /buttony> 


7.6.2 选项 


大 部 分 按钮 选项 与 属性 所 实现 的 效 末 是 非常 类 似 的 ， 表 7-5 列 出 了 类 似 功 能 的 选项 与 属性 的 
对 照 表 。 通 钊 ， 按 钮 选项 通过 jQuery 噬 选 角 进 行 选择 ， 并 将 效 末 批量 施加 在 特定 DOM 对 绷 上 。 
表 7-5 ”按钮 选项 与 属性 对 照 表 
选 项 属 性 功 能 
corners data-corners 设置 按钮 外 形 为 直角 或 者 圆 角 
icon data-icon 设置 按钮 图 标 样式 
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( 续 ) 
选项 属 性 功 能 
iconpos data-iconpos 设置 图 标 按钮 位 置 
iconshadow data-iconshadow 设置 图 标 按钮 是 否 呈 现 阴 影 效 果 
inline data-inline 设置 按钮 是 否 为 内 联 按钮 
mini data-mini 设置 按钮 是 否 为 mini 尺 十 
shadow data-shadow 设置 按钮 为 阴影 方式 显示 
theme data-theme 设置 按钮 显示 theme 风 \ 格 


在 jQuery Mobile 中 ，initSelector 选 项 是 唯一 没有 按钮 属性 对 应 的 选项 ， 它 用 于 美化 特 
定 CSS 选 择 需 指定 的 按钮 。jQuery Mobile 会 将 initSelector 中 的 选择 圳 所 指向 的 DOM 美 化 成 按 
钮 的 样子 。 

initSelector 的 默认 值 是 S$ 种 按钮 对 象 button，[type='button']， [type='submit ' ] ， 
[type='reset'], [type='image']。 也 就 是 说 , 在 没有 任何 initSelector 设 定 的 情况 下 , jQuery Mobile 
会 默认 将 这 5 种 按钮 美化 为 jQuery Mobile 的 按钮 风格 。 

此 外 , 开发 者 还 可 以 设 定 特定 的 jQuery 选择 硕 ， 例 如 特定 的 CSS， 以 实现 对 特定 DOM 对 象 的 
美化 。 


7.6.3 方法 和 事件 


对 于 Form 类 型 的 按钮 ,可 以 通过 按钮 方法 对 其 执行 启用 、 禁 用 或 刷新 操作 , 具体 如 表 7-6 
所 未 。 


表 7-6 ”按钮 方法 


方 ”法 功 能 

enable 启用 一 个 被 禁用 的 按钮 

disable 森 用 一 个 Form 按 钮 

refresh 刷新 按钮 ， 用 于 更 新 按钮 显示 样式 


代码 清单 7-4 林 用 了 id 为 bptnsearch 的 查找 按钮 。 
代码 清单 7-4 ”禁用 按钮 的 代码 示例 


«script type="text/javascript"> 
function OnBtnClick(){ 
$("#btnSearch").button('disable'); 
} 


</script> 


运行 上 述 代码 ， 可 以 发 现 查 找 按钮 被 禁用 后 的 效 末 如 图 7-9 所 示 。 
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按钮 方法 


图 7-9 ”按钮 被 禁用 的 效果 


注意 ”在 jQuery Mobile 中， 按钮 方法 只 能 用 于 表单 按钮 ， 而 不 可 用 于 按钮 样式 的 超级 链接 。 
需要 说 明 的 是 ， 在 创建 按钮 时 ， 将 触发 create 事 件 。 


7.7 目 定 义 按 钮 


jQuery Mobile 提 供 了 第 用 的 按钮 样式 和 18 种 按钮 图 标 , 但 在 一 些 特定 场景 中 ， 用 户 需 要 根 
据 上 自己 的 需要 定制 按钮 ,例如 信息 系统 中 的 报表 和 打印 图 标 按钮 ,或 者 需要 在 按钮 中 放 入 大 量 
文字 时 。 


7.7.1 自 定义 按钮 图 标 


除了 可 以 使 用 jQuery Mobile 提 供 的 18 种 按钮 图 标 之 外 ,我们 还 可 以 目 定 义 按钮 图 标 ， 下 面 我 
们 详细 介绍 一 下 如 何 目 定义 按钮 图 标 。 

首先 ， 开发 者 绘制 出 PNG-8 格 式 的 18 x 18 像 素 的 图 标 文 件 。 这 里 开发 者 可 以 使 用 透明 至 景 的 
格式 ， 这 样 有 利于 与 页 面 和 按钮 主题 风格 集成 。 

之 后 ， 开 发 者 需要 在 目 定 义 的 CSS 文 件 中 添加 特定 的 图 标 样式 。 这 里 需要 说 明 的 是 ， 按 钮 图 
标 样 式 命名 需要 以 .ui-icon- 开 涉 。 比 如 ,一 个 上 自 定 义 报表 图 标 按钮 可 以 被 命名 为 .ui-icon-report， 
这 样 便于 jQuery Mobile 程 序 识别 它 并 将 其 作为 按钮 图 标 加 载 。 

下 面 是 一 段 日 定义 报表 图 标的 CSS 样 式 : 
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<style> 
.Ui-icon-report { 
background-image: url(report.png); 
background-size: 18px 18px; 


</style> 
需要 说 明 的 是 ， 实 现 目 定 义 按钮 图 标 时 ， 需 要 将 样式 名 称 的 .uiricon- 前 缀 部 分 去 把 ， 将 名 称 
剩 下 的 部 分 report 赋 信 给 data-icon 必 性 : 
<button data-icon="Teport "> 报表 按钮 /buttony》 
如 采用 户 使 用 的 是 iPhone 4、iPhone 4S 或 者 The New iPad， 由 于 这 些 设备 采用 高 分 辨 屏 幕 ， 
所 以 开发 者 最 好 能 够 开发 一 套用 于 高 分 辨识 的 按钮 ， 以 保证 用 户 体验 良好 。 一 般 情 况 下 ,按钮 的 
分 辩 率 为 36 x 36 像 素 。 
对 不 同 移动 设备 浏览 硕 的 分 辨 率 而 加 载 不 同 的 CSS 定 义 , 这 属于 CSS3 的 媒体 查询 技术 , 相关 
内 容 请 参阅 第 11 草 。 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
.Ui-icon-report { 
background-image: url("report.HD.png"); 
background-size: 18px 18px; 


} 
} 


如 果 浏 览 带 检测 到 当前 的 显示 设备 的 分 辨 卒 比较 高 , 就 会 应 用 媒体 查询 中 所 指 癌 的 按钮 图 标 
样式 O 


7.7.2 ”文字 折 行 显示 


在 一 些 应 用 场景 下 ,我们 可 能 需要 在 按钮 上 放置 长 度 不 等 的 文字 ,此 时 就 广 持 文字 折 行 显示 。 
例如 , 在 国际 化 和 本 地 化 过 程 中 , 就 可 能 过 到 不 同 语言 转换 中 文学 长 度 不 等 的 问题 ， 如 在 将 中 文 
翻译 为 严 文 的 过 程 中 ,文字 通常 会 变 长 而 使 得 界面 更 拥挤 ,其 至 引起 布局 变化 ， 此 时 就 需要 对 超 
长 的 文字 进行 折 行 显示 。 

通 第 ，CSS 样 式 上 默认 设 定 为 按钮 文字 不 允许 折 行 。 如 果 和 需要 将 按钮 文字 折 行 显示 ， 可 以 重新 
定义 ui-btn-inner 样 式 为 : 

<style type="text/css"> 


.Ui-btn-inner { 
white-space: normal !important; 


</style> 

在 CSS 中 ，!important 表 示 CSS 优 先 级 ， 这 里 用 以 提升 white-space:normal 的 优先 级 ， 从 而 使 
得 按钮 文字 支持 折 行 显示 。 

图 7-10 是 应 用 折 行 显示 前 后 的 效果 对 比 。 
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图 7-10 左 图 为 非 折 行 显示 ， 右 图 为 折 行 显示 的 按钮 样式 


在 Web 移 动 应 用 开发 中 ,工具 栏 是 一 种 常用 的 界面 设计 方式 , 一些 常用 的 页 面 元 厅 会 集成 在 
工具 栏 中 ,例如 标题 、 后 退 按 钮 或 者 某 些 和 常用 的 链接 。 

在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

口 工具 栏 显 示 模 式 ; 

口 页 慎 和 页 脚 工具 栏 ; 

口 导航 工具 栏 ; 

口 固定 工具 栏 及 其 属性 、 选 项 、 方 法 和 事件 ; 

口 高 级 开发 技巧 。 


8.1 工具 栏 显示 模式 


工具 栏 主要 分 为 页 脚 工 具 栏 和 页 眉 工 具 栏 。 页 脚 工具 栏 更 方便 单 手 触 控 操作 ,所 以 在 很 多 移 
动 应 用 中 ,很 多 常用 功能 会 放 在 这 个 工具 栏 中 ,而 页 眉 工具 栏 会 作为 标题 栏 和 导航 功能 使 用 。 常 
见 的 jQuery Mobile 工 具 栏 以 固定 工具 栏 或 者 内 联 工 具 栏 的 形式 呈现 ， 如 图 8-1 所 示 。 


$ $ 


| Ep | 四 Ep: 


页 大工 具 栏 


页 眉 和 页 脚 工 具 栏 有 助 于 使 用 者 进行 常用 操 工具 栏 
作 . 


页 层 和 页 脚 工 具 栏 有 助 于 使 用 者 进行 常用 抬 
作 。 


页 脚 工 具 栏 


图 8-1 左 图 为 固定 模式 的 工具 栏 ， 右 图 为 内 联 模式 的 工具 栏 
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在 固定 模式 的 工具 栏 中 ， 当 用 户 轻 击 移动 设备 浏览 锅 时 ， 会 显示 或 者 隐藏 工具 栏 。 固 定 工 具 
栏 在 浏览 大 屏幕 中 的 位 置 也 是 固定 的 , 页 眉 工 具 栏 总 是 位 于 训 览 硕 屏 才 最 上 方 , 而 页 脚 工具 栏 总 
是 处 于 浏览 融 屏 疾 最 下 方 。 

尽管 固定 模式 的 工具 栏 的 应 用 更 加 普遍 一 些 , 但 是 默认 情况 下 jQuery Mobile 的 工具 位 不 会 被 
设 定 为 固定 模式 的 工具 栏 ， 而 是 以 内 联 方 式 呈 现在 界面 上 。 在 内 联 模式 的 工具 栏 中 ,页 眉 工 具 栏 
将 出 现在 页 面 正 文 内 容 的 上 方 , 而 正文 结束 之 后 紧 跟着 的 是 页 脚 工具 栏 , 并 且 随 着 正文 内 容 的 长 
短 ， 工 具 栏 的 位 置 也 会 发 生变 化 。 

在 jQuery Mobile 中 ,很 容易 实现 页 眉 工 具 栏 和 页 脚 工具 栏 。 要 实现 页 由 工具 栏 ， 开 发 者 只 需 
在 div 容 器 中 添加 data-role 属 性 为 header 即 可 。 同 样 ， 页 脚 工 具 栏 所 对 应 的 属性 data-role 为 
footer, 

如 果 工 具 栏 被 设置 为 固定 模式 ， 则 每 次 轻 击 浏览 各 ， 工具 位 就 会 锌 显示 或 者 隐藏 。 如 果 工 具 
栏 是 内 联 模 式 ， 则 任何 时 候 工 具 栏 都 会 被 呈现 在 页 面 的 最 上 方 和 最 下 方 。 

默认 情况 下 ， 页 眉 和 页 脚 工 具 栏 是 以 内 联 模式 呈现 的 。 如 采 需 要 以 固定 模式 呈现 工具 栏 ， 则 
需要 添加 data-position="fixed" 属 性 。 

图 8-1 左 图 所 示 的 固定 模式 的 工具 栏 的 代码 如 代码 清单 8-1 所 示 。 在 这 段 代码 中 ， 页 眉 工 具 栏 
所 在 的 div 容 器 的 data-role 属 性 被 设置 为 header， 页 脚 工 具 栏 的 div 容 器 的 data-role 属 性 被 设置 
为 footer ， 并 且 页 眉 工 具 栏 和 页 脚 工具 栏 都 设置 属性 data-position 为 fixed。 


代码 清单 8-1 固定 模式 的 工具 位 的 代码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="MainPpage"” data-role="page” data-title=" 工 具 栏 "> 
<div data-role="header" data-position= fixed” data-fullscreen="true" data-theme="c"> 
<h2> 页 收工 具 栏 </h2> 
</div> 
<h1> 工 具 栏 </h1> 
页 届 和 页 脚 工具 栏 有 助 于 使 用 者 进行 常用 操作 。 
<div data-role="footer" data-position="fixed" data-theme="c"> 


<h2> 页 脚 工具 栏 </h2> 
</div> 
</Sectiony> 
</body> 


</html> 
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即便 页 收 或 者 页 脚 工 具 栏 中 只 包含 文字 ， 我们 也 建议 开发 者 加 上 标题 标签 ， 并 且 任 何 标 
题 标签 (h1 到 h6 ) 都 可 以 。 如 果 不 加 入 标题 标签 ， 则 工具 栏 所 呈现 的 高 度 、 字 号 和 边 距 
等 可 能 出 现 显示 异常 。 


2 一 一 
王 局 
/ AD 


8.2 页 眉 和 页 脚 工 具 栏 
对 于 页 眉 工具 栏 ， 我 们 主要 设置 工具 栏 中 的 按钮 样式 和 位 置 。 


注意 页 眉 工 具 栏 按钮 通常 是 超级 链接 按钮 ， 而 不 是 表单 按钮 ， 用 错 的 话 可 能 导致 页 面 呈 现 异 


常 与 功能 异常 。 


在 页 眉 工 具 栏 中 ,按钮 默认 情况 下 分 立 在 标题 文字 的 两 端 , 左 侧 按 钮 会 在 标题 栏 中 大 左 显示 ， 
右 侧 按钮 则 会 居 右 显示 。 默 认 情 况 下 ， 页 眉 工 具 栏 中 的 按钮 都 将 呈现 为 内 联 样式 。 
代码 清单 8-2 演 示 了 在 页 眉 工 具 栏 中 顺序 放置 按钮 和 标题 文字 的 代码 。 


代码 清单 8-2 ”在 页 眉 工 具 栏 中 顺序 放置 按钮 和 标题 文字 


<div data-role="header" data-position="fixed" data-fullscreen="true"> 
<a href="#" data-role="button" data-icon="arrow-1" data-theme="c"> 


左 侧 
</ay> 
<h2> 页 届 工 具 栏 </h2> 


<a href="#" data-role="button” data-icon="arrow-r" data-theme="c"> 
右 侧 
</ay> 
</div> 
运行 上 述 代码 ， 得 到 的 运行 结果 如 图 8-2 所 示 。 
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页 眉 和 页 脚 工具 栏 有 助 于 使 用 者 进行 常用 操 
作 。 


图 8-2 ”页 眉 按钮 位 置 
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如 条 需 要 指定 页 眉 按 钮 位 于 页 眉 的 一 侧 , 可 以 通过 定义 CSS 样 式 来 实现 。 表 8-1 列 出 了 设置 工 
具 栏 中 按钮 位 置 的 样式 属性 。 


表 8-1 样式 属性 


样式 名 称 作 用 
.ui-btn-left 按钮 位 于 页 眉 左 侧 
.ui-btn-right 按钮 位 于 页 丑 右 侧 


如 有 末 页 眉 工 具 栏 中 只 有 图 标 而 没有 标题 文字 , 也 不 能 单纯 地 只 在 其 中 放 和 超级 链接 按钮 。 如 
采 没 有 标题 标签 h1 到 h6, 页 眉 高 度 将 会 显示 异 稼 , 此 时 可 以 通过 添加 一 个 DOM 容 融 , 并 设置 class 
属性 为 ui-title 来 解决 : 

<Span class="ui-title"></span> 

这 个 DOM 容 融 的 作用 就 是 撑 开 页 眉 工 具 栏 ， 使 之 不 会 变形 。 尽 管 有 这 样 的 处 理 页 面 变形 方 
法 ， 我们 依然 建议 开发 者 : 如 果 工 具 栏 中 包含 有 标题 文字 ， 还 是 要 将 标题 文字 放 和 人 ha 到 h6 的 标 
题 中 。 

如 果 和 希望 在 页 眉 工 具 栏 中 添加 返回 按钮 ， 可 以 在 超级 链接 按钮 中 添加 data-add-back-btn= 
"true" 属 性 , 此 时 按钮 中 原 有 的 超级 链接 指 癌 将 不 再 起 作用 , 而 只 保留 返回 功能 。 作为 一 种 经 验 ， 
尽管 添加 了 data-add-back-btn 属 性 , 按钮 中 依然 建议 保留 指 癌 前 一 个 页 面 的 超级 链接 地 址 。 这 是 
为 一 些 浏 览 硕 可 能 不 文 持 data-add-back-btn 属 性 , 此 时 依然 可 以 通过 定义 的 超级 链接 地 址 而 回 
到 正确 的 页 面 。 

页 脚 工 具 栏 和 页 眉 工 具 栏 的 按钮 设置 大 致 相同 。 从 用 户 行为 习惯 出 发 , 按钮 组 和 表单 也 可 以 
放置 在 页 脚 工 具 栏 ， 以 便 用 户 操作 。 


注意 ”如 果 在 页 脚 工具 栏 中 使 用 按钮 组 ， 需 要 将 按钮 组 设置 为 水 平 排列 按钮 的 方式 。 默 认 情 况 
下 ， 按 钮 组 将 垂直 排列 各 个 按钮 。 
设置 按钮 组 为 水 平 排列 ,可 以 通过 在 data-role="controlgroup" 的 按钮 组 DOM 容 器 中 添加 
属性 data-type="horizontal" 来 实现 。 


8.3 ”导航 工具 栏 


导航 工具 栏 可 以 容纳 一 些 导 航 按钮 , 用 以 控制 页 面 或 功能 间 切 换 。 导航 工 具 柱 通 第 与 页 眉 工 
具 栏 或 页 脚 工 具 栏 共同 使 用 , 可 以 理解 为 页 眉 或 页 脚 工 具 栏 在 导航 功能 上 的 补充 。 有 别 于 通常 所 
见 的 按钮 样式 ， 导 航 工具 栏 按钮 没有 了 圆 形 的 按钮 边界 ， 只 有 方正 的 导航 按钮 。 如 于 导航 工具 栏 
中 有 两 个 导航 按钮 ， 则 每 个 按钮 将 各 占 移动 设备 训 览 带宽 度 的 一 半 。 

代码 清单 8-3 展 示 了 实现 导航 工具 栏 的 过 程 ， 大 致 分 为 下 面 这 两 个 步 又 。 
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(在 工具 栏 容 融 中 构造 包含 data-role="navbar" 属 性 的 div 容 髓 ， 而 这 个 div 容 需 将 作为 导航 
工具 栏 的 容器 使 用 。 
(2) 在 这 个 导航 工具 栏 的 div 容 适中 ， 加 入 经 过 <ul><1i> 列 表 标 签 包装 的 超级 链接 。 


代码 清单 8-3 ”导航 工具 栏 示例 


<div data-role="navbar"> 
<U]> 
《Li><a href="#"> 导 航 按钮 4/a></1i> 
《Li><a href="#"> 导 航 按钮 </a></1i> 
<1i><a href="#"> 导 航 按钮 </a></1i> 
《Li><a href="#"> 导 航 按钮 4/a></1i> 
</U]> 
</div> 


注意 ”虽然 性 航 工 具 栏 看 似 一 组 横向 排列 的 按钮 ， 但 是 这 些 按钮 并 不 是 Form 按 钮 ， 而 是 按钮 样 
式 的 超级 链接 。 


如 果 和 希望 导航 按钮 中 包含 按钮 图 标 ， 可 以 通过 添加 data-icon 属 性 来 实现 ， 如 代码 清单 8-4 
所 示 。 


代码 清单 8-4 ”包含 图 标 按钮 的 导航 工具 栏 


<div data-role="navbar"> 
<U]> 
《1Li><a href="#" data-icon="arrow-1"> 向 前 </a></1i> 
<1i><a href="#"” data-icon="arrow-r"> 向 后 </a></1i> 
</Ul> 
</div> 


香 要 集成 导航 工具 栏 与 页 丑 或 页 脚 工 具 栏 , 只 需要 将 导航 工具 栏 舰 入 到 页 收 或 页 脚 工具 栏 即 
可 , 示例 代码 如 代码 清单 8-$ 所 示 。 导 航 工 具 栏 可 以 单独 通过 data-theme 来 美化 样式 ， 相 关内 容 可 
见 第 13 章 。 


WY 马 


代码 清单 8-5 “集成 在 页 由 和 页 脚 工具 栏 的 导航 工具 栏 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="MainPage” data-role="page” data-title=" 导 航 工 具 条 "> 
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<header data-role="header" data-position="fixed"> 


<h1> 导 航 工 具 栏 </h1> 
<div data-role="navbar"> 
<U]> 


<]1><a href="#"> 导 航 按钮 </a></1i> 
《Li><a href="#"> 导 航 按钮 4/a></1i> 
《Li><a href="#"> 导 航 按钮 4/a></1i> 
《11><a href="#"> 导 航 按钮 </a></1i> 
</Uul> 
</div> 
</header> 
<div data-role="content"> 
<p> 页 刷 或 页 脚 导航 工具 栏 都 可 以 集成 导航 工具 栏 以 实现 丰富 的 导航 效果 。 
</p> 
</div> 
<div data-ITole= footer ”data-position= fixed > 
<div data-role="navbar"> 
<Ul> 
《1Li><a href="#" data-icon="arrow-]1"> 向 前 </a></1i> 
<1i><a href="#"” data-icon="arrow-r ”> 向 后 </a></1i> 
</U]> 
</div> 
</div> 
<«/section> 
</body> 
</html> 


运行 上 述 代码 ， 得 到 的 运行 效果 如 图 8-3 所 示 。 


导航 工具 栏 


导航 技 钮 导航 技 钮 导航 技 钮 导航 技 钮 


页 局 或 页 脚 导航 工具 栏 都 可 以 集成 导航 工 
具 栏 以 实现 丰富 的 导航 效果 。 


图 8-3 ”导航 工具 栏 


在 传统 网 页 呈现 中 , 如 果 内 容 超 出 一 屏 显 示范 围 , 那么 将 会 在 浏览 需 右 侧 出 现 一 个 垂直 滚动 
条 ， 而 在 移动 浏览 硕 中 却 不 会 。 当 用 手 向 上 请 动 屏 幕 的 时 候 ， 内 容 将 会 随 之 移动 。 由 于 页 眉 和 页 
脚 工 具 栏 被 添加 了 data-position="fixed" 属 性 , 所 以 内 容 在 上 下 翻动 的 时 候 ， 导 航 工 具 栏 的 位 置 
是 不 变 的 ， 这 样 用 户 就 可 以 方便 地 点 击 导 航 按钮 进行 相应 操作 。 
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在 导航 工具 栏 中 ， 每 行 最 多 有 5 个 导航 按钮 ， 超 过 则 目 动 换行 显示 。 在 目 动 换行 的 导航 工具 
栏 中 ， 每 行 上 只 有 两 个 导航 按钮 ， 如 图 8-4 所 示 。 


导航 按钮 导航 按钮 
导航 按钮 导航 技 名 
导航 按钮 导航 按钮 


导航 按钮 


页 届 或 页 脚 导航 工具 栏 都 可 以 集成 导航 工 
具 栏 以 实现 丰富 的 导航 效果 。 


图 8-4 包含 7 个 导航 按钮 的 导航 工具 栏 


8.4 ”固定 工具 栏 属性 、 选 项 、 方 法 和 事件 


在 前 面 的 介绍 中 , 我 们 初步 了 解 到 固定 工具 栏 的 特点 。 我 们 可 以 将 页 眉 或 页 脚 工 具 栏 设置 为 
固定 工具 栏 ， 当 页 面 中 的 内 容 被 拖 动 时 ,固定 导航 栏 的 位 置 依然 保持 保 徘 屏 吉 上 下 ， 而 不 会 发 生 
变动 。 

固定 工具 栏 可 以 通过 设置 属性 和 选项 来 设 定 呈现 形式 ， 也 可 以 通过 方法 和 事件 进行 交互 操 
作 ， 下 面 我 们 就 来 傈 单 介绍 一 下 。 


8.4.1 属性 


使 用 固定 工具 栏 的 属性 ,可 以 设 定 固定 工具 栏 的 呈现 或 操作 效果 。 常用 的 固定 工具 栏 属性 如 
表 8-2 所 示 。 


表 8-2 固定 工具 栏 属性 
属 性 含 义 
data-visible-on-page-show 设置 页 面 被 加 载 持 ， 是否 显示 固定 工具 栏 。 
e 默认 为 true， 目 动 呈现 固定 工具 栏 。 
e 设置 为 false 时 ， 则 隐藏 固定 工具 栏 。 
如 果 设 置 data-visible-on-page-show 属 性 ， 通 向 会 一 块 设置 页 眉 工 具 栏 和 页 脚 工具 栏 ， 
否则 每 次 轻 击 屏 幕 ， 一 个 工具 栏 被 隐藏 而 另 一 个 则 被 打开 。 
示例 代码 : 


<div data-role="footer" data-position="fixed" data-visible-on-page-show="false">.. 
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( 续 ) 
属 性 含义 

data-disable-page-zoom 设置 页 面 是 否 人 允许 缩放 。 

e 默认 为 true， 不 允许 对 页 面 进行 缩放 。 

e 设 置 为 false 时 ， 则 人 允许 对 页 面 进 行 缩放 。 

示例 代码 : 

<div data-role="footer" data-position= fixed” data-disable-page-zoom="false">... 
data-transition 设置 工具 栏 切换 方式 。 

e 默认 为 幻灯 方式 slide。 


e 设 置 为 fade 时 ， 为 淡 入 淡出 效果 。 

e 设置 为 none 时 ， 为 无 动画 效果 。 

在 一 些 操作 系统 上 ，data-transition 并 不 如 预期 的 这 样 显 示 。 

示例 代码 : 

<div data-Tole= footer” data-position= fixed” data-transition="slide">... 
data-fullscreen 设置 以 全 屏 方 式 显示 固定 工具 栏 。 

示例 代码 : 

<div data-role="footer" data-position="fixed" data-fullscreen ="false">.. 
data-tap-toggle 设置 屏 大 轻 击 之 后 是 否 隐 藏 与 显示 。 

e 默认 为 true， 轻 击 或 用 鼠标 点 击 屏 医 时， 显示 或 隐藏 固定 工具 栏 。 

e 设置 为 false 时 ,， 当 轻 击 或 者 用 鼠标 点 击 屏幕 时 , 固定 工具 栏 始终 不 变 。 如 果 之 前 显示 ， 

则 始终 显示 ， 反 之 亦 然 。 

示例 代码 : 

<div data-role="footer" data-position="fixed" data-tap-toggle="false">... 
data-update-page-padding 设置 固定 工具 栏 的 页 面 填充 ， 默认 值 为 true。 如 果 设 置 为 false， 则 可 能 在 方向 切换 或 其 

他 尺寸 调整 中 不 会 更 新 页 面 填充 尺寸 


8.4.2 选项 


选项 用 以 通过 程序 对 固定 工具 栏 进行 设 定 。 由 于 大 多 数 固定 工具 栏 选项 和 属性 的 使 用 非 稼 类 
似 ， 表 8-3 列 出 了 选项 与 属性 的 对 照 表 。 


表 8-3 固定 工具 栏 选项 与 属性 对 照 表 


选 项 属 性 功 能 
visibleOnPageShow data-visible-on-page-show 设置 页 面 被 加 载 时 ， 是 否 显示 固定 工具 栏 
disablePageZoom data-disable-page-zoom 设置 页 面 是 否 允 许 缩放 
transition data-transition 设置 工具 栏 切 换 方 式 
fullscreen data-fullscreen 设置 以 全 屏 方 式 显示 固定 工具 栏 
tapToggle data-tap-toggle 设置 屏幕 轻 击 之 后 是 否 隐藏 与 显示 
updatePagePadding data-update-page-padding 设置 固定 工具 栏 的 页 面 填 充 


除去 上 述 与 固定 工具 栏 属性 功能 接近 的 选项 之 外 ,固定 工具 栏 还 有 一 些 选 项 没有 对 应 的 属 
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性 ， 使 用 过 程 中 需要 通过 JavaScript 对 其 进行 控制 ， 这 些 选 项 如 表 8-4 所 示 。 


属 性 舍 义 
tapToggleBjacklist ”如果 轻 击 在 特定 CSS 样 式 之 上 ， 则 不 会 隐藏 或 展开 固定 工具 栏 。 
默认 值 为 "a，.ui-header-fixed，.ui-footer-fixed" 
下 面 这 上 段 代 码 用 于 实现 轻 击 在 input 对 象 上 ， 不 会 隐藏 或 展开 固定 工具 栏 : 


$(".headerToolbar").fixedtoolbar({ tapToggleBlacklist: "a, input, .ui-header-fixed, .ui- 
footer-fixed"” }); 


hideDuringFocus 如 采 焦 点 落 在 特定 DOM 对 象 上 ， 则 目 动 隐藏 固定 工具 栏 。 
默认 值 为 "input，select，textarea" 
下 面 这 段 代 码 实现 焦点 沙 在 input 上 时 上 自动 隐藏 固定 工具 栏 : 
$(".headerToolbar").fixedtoolbar({ hideDuringFocus: "input” }); 

supportBlacklist 反馈 是 否 文 持 黑 名 单 的 布尔 数值 。 

initSelector 日 定义 CSS 样 式 名 称 ， 用 以 声明 固定 工具 栏 。 
默认 值 为 :":jqmData(position='fixed' )"， 表 示 在 包含 有 data-role 属 性 值 为 header 或 者 footer 的 
容器 中 声明 属性 data-position 为 fixed， 则 这 个 容器 为 固定 工具 栏 


8.4.3 方法 和 事件 
JavaScript 可 以 通过 方法 对 固定 工具 栏 进行 展开 、 隐 藏 和 销毁 等 操作 ， 具 体 如 表 8-5$ 所 示 。 


表 8-5 固定 工具 栏 方法 及 其 含义 


方 法 售 义 
Show 打开 指定 的 固定 工具 栏 。 
示例 代码 : 
$("#footerToolbar" ) .fixedtoolbar(' show' ); 
hide 隐藏 指定 的 固定 工具 栏 。 
示例 代码 : 
$("#footerToolbar" ).fixedtoolbar('hide'); 
toggle 切换 固定 工具 栏 的 显示 或 隐藏 状态 。 
示例 代码 : 
$("#footerToolbar").fixedtoolbar('toggle' ); 
updatePagePadding 更 新 页 面 填充 。 
示例 代码 : 
$("#footerToolbar").fixedtoolbar('updatepagePadding' ); 
destroy 恢复 固定 工具 栏 元 素 到 初始 状态 。 注 意 ， 这 里 不 是 销毁 或 者 删除 。 
示例 代码 : 


$("#footerToolbar").fixedtoolbar(' destory' ); 


只 有 页 面 的 内 容 高 度 超 过 屏幕 高 度 时 , 固定 工具 栏 的 这 些 方法 的 使 用 效果 才 会 表现 出 来 ， 
否则 固定 工具 栏 将 始终 出 现在 浏览 器 上 ， 而 不 会 消失 。 
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代码 清单 8-6 展 示 了 固定 工具 位 方法 的 使 用 方法 ， 包 括 显示 、 隐 藏 、 状 态 切换 、 更 新 填充 、 
恢复 到 初始 状态 等 操作 。 


代码 清单 8-6 固定 工具 栏 方法 的 使 用 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta Charset= utf-8 > 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
«script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
$("#footerToolbar") .fixedtoolbar({tapToggleBlacklist: "a, button, input, 
select, textarea, .ui-header-fixed, .ui-footer-fixed” }); 
}); 
function btnShowToolbar( ){ 
$("#footerToolbar") .fixedtoolbar( "show ); 
} 
function btnHideToolbar( ){ 
$("#footerToolbar") .fixedtoolbar( ' hide ); 
} 
function btnToggleToolbar(){ 
$("#footerToolbar" ) .fixedtoolbar(' toggle' ); 
} 
function btnUpdatePagePaddingToolbar(){ 
$("#footerToolbar") .fixedtoolbar( "updatePagePadding ' ) ; 
} 
function btnDestoryToolbar(){ 
$("#footerToolbar").fixedtoolbar(' destory' ); 
} 
</script> 
</head> 
<body> 
<Section id="MainPage” data-role="page” data-title=" 导 航 工具 栏 "> 
<div data-role="header" data-position="fixed"> 
<h1> 固 定 工具 栏 方法 </h1> 
</div> 
<div data-role="content"> 
《p> 通过 自 定义 方法 对 固定 工具 栏 执行 操作 。 
<button onClick="btnShowToolbar();">Show 方 法 </button> 
<button onClick="btnHideToolbar();">Hide 方 法 </button> 
<button onClick="btnToggleToolbar();">Toggle 方 法 </button> 
<button onClick="btnUpdatePagePaddingToolbar();">UpdatePagePadding 方 法 </button> 
<button onClick="btnDestoryToolbar();">Destory 方 法 </button> 


</p> 

</div> 

<div data-role="footer" id="footerToolbar" data-position="fixed"> 
<h2> 页 脚 工具 栏 </h2> 


</div> 
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</Sectiony> 
</body> 
</html> 


震 要 注意 的 是 , 在 这 个 代码 示例 中 ,各 个 固定 工具 栏 方法 是 通过 按钮 来 触发 的 ， 而 按钮 并 不 
在 固定 工具 柱 tapToggleBlacklist 选 项 默认 设 定 的 范围 之 中 ， 这 也 就 意味 着 每 次 触 碰 按钮 时 ， 除 
了 执行 固定 工具 栏 方法 外 ， 还 会 触发 固定 工具 栏 显 示 或 者 隐藏 。 为 此 ， 在 程序 中 特别 对 
tapToggleBlacklist 进 行 扩 展 ， 将 按钮 、 输 入 框 、 选 择 框 和 文本 框 等 元 素 也 添加 到 黑 名 单 中 ， 以 
保证 应 用 正确 执行 。 

此 外 ， 需 要 说 明 的 是 ， 当 建立 冉 定 工具 栏 的 时 候 ， 将 会 触发 create 事 件 。 


8.5 ”高 级 开发 技巧 


工具 栏 的 开发 ， 通 稼 主要 是 固定 工具 栏 的 开发 。jQuery Mobile 库 为 开发 者 提供 了 默认 的 网 标 
与 预定 义 的 风格 样式 ,开发 者 可 以 根据 业务 场景 的 需要 对 固定 工具 栏 的 样式 、 风格、 图 标 和 文字 
进行 定制 。 


8.5.1 上 自 定 义 图 标 导 般 工具 栏 


导航 工具 栏 为 开发 者 提供 了 一 套用 户 寞 面 风格 统一 、 导 航 按 钮 民 寸 均匀 的 工具 柱 。 只 是 
jQuery Mobile 所 能 提供 的 按钮 种 类 相对 有 限 , 内 置 的 图 标 数量 也 相对 有 限 。 通 过 日 定义 按钮 图 标 ， 
扩展 既 有 界面 呈现 样式 将 有 助 于 开发 语义 更 加 清晰 、 便 于 使 用 的 用 户 界 面 。 

开发 目 定 义 图 标 导 航 工 具 栏 ， 大 致 包括 这 样 儿 个 主要 的 定制 化 步 又 。 

(1) 设 定 导 币 按 钮 与 图 标 背 景 梓 式 。 

(2) 选取 目 定 义 导 航 按钮 。 

(3) 将 定制 导航 按钮 集成 到 导航 工具 栏 。 

代码 清单 8-7 是 目 定 义 图 标 导 航 工 具 栏 的 示例 。 


代码 清单 8-7” 目 定义 工具 栏 图 标 代码 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
«script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<style type="text/css"> 
.nav-glyphish .ui-btn .ui-btn-inner { 
padding-top: 43px !important; 


.nav-glyphish .ui-btn .ui-icon { 


130 第 8 章 工具 栏 


width: 45px!important; 
height: 35px!important; 
margin-left: -24px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important; 
-webkit-box-shadow: none!important; 
-webkit-border-radius: none !important; 
border-radius: none !important; 
} 
#favorite .ui-icon { 
background-image: url(http://glyphish.com/images/demo.png); 
background-position: -345px -112px; 
background-repeat: no-repeat; 
} 
#recent .ui-icon { 
background-image: url(http://glyphish.com/images/demo.png); 
background-position: -9px -61px; 
background-repeat: no-repeat; 
} 
#contacts .ui-icon { 
background-image: url(http://glyphish.com/images/demo.png); 
background-position: -9px -540px; 
background-repeat: no-repeat; 
} 
#voicemail .ui-icon { 
background-image: url(http://glyphish.com/images/demo.png); 
background-position: -394px -733px; 
background-repeat: no-repeat; 
} 
</style> 
</head> 
<body> 
<Section id="Mainpage” data-role="page”data-title=" 时 航 工具 栏 "> 
<header data-role="header" data-position="fixed"> 
<h1> 导 航 工具 栏 </h1> 
</header> 
<div data-role="content"> 
<p> 自 定义 图 标的 导航 工具 栏 。 
</p> 
</div> 
<div data-role="footer" class="nav-glyphish" data-position="fixed"> 
<div data-role="navbar" class="nav-glyphish" data-grid="c"> 
<Ul> 
《Li><a href="#" id="favorite” data-icon="custom"> 收 藏 </a></1i> 
<1i><a href="#"” id="recent”data-icon="custom"> 最 近 </a></1i> 
<1i><a href="#" id="contacts” data-icon="custom"> 联 系 人 </a></1i> 
<1i><a href="#" id="voicemail"” data-icon="custom"> 录 音 </a></1i> 
</U]> 
</div> 
</div> 
</section> 
</body> 
</html> 
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运行 上 述 代 人 码 ， 得 到 的 日 定义 图 标 呈 现 效 来 如 图 8-5 所 示 。 


自 定义 图 标的 导航 工具 栏 。 


图 8-5 日 定义 图 标的 导航 工具 栏 


代码 中 的 CSS 实 现 了 对 于 目 定 义 图 标的 样式 定义 。 
首 完 ， 对 按钮 的 高 度 、 尺 寸 和 边框 等 进行 定义 ， 这 样 的 定义 包括 padding 尺 寸 、 图 标高 
宽度 和 边界 等 ， 并 通过 声明 !important 优 先 级 确保 设置 的 样式 有 歼 ， 有 具体 代码 如 下 : 


.nav-glyphish .ui-btn .ui-btn-inner { 
padding-top: 43px !important; 


、 


.nav-glyphish .ui-btn .ui-icon { 
width: 45px!important; 
height: 35px!important; 
margin-left: -24px !important; 
box-shadow: none!important; 
-moz-box-shadow: none!important; 
-webkit-box-shadow: none!important; 
-webkit-border-radius: none !important; 
border-radius: none !important; 


} 


然后 ， 针 对 不 同 按钮 功能 逐一 设置 不 同 的 图 标 ， 这 样 的 定义 包括 背景 图 片 CSS 样 式 名 称 、 
景 图 片 名 称 和 位 置 等 ， 具 体 代码 如 下 : 


#favorite .ui-icon { 


background-image: url(http://glyphish.com/images/demo.png); 
background-position: -345px -112px; 
background-repeat: no-repeat; 


} 
最 后 ， 在 导航 工具 栏 的 超级 链接 按钮 上 设置 定义 了 背景 图 片 和 显示 尺寸 的 CSS 样 式 : 


<1i><a _ href="#”id="favorite”data-icon="custom" > 收藏 \/a></1iy> 
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这 里 的 图 标 取 有 日 http://glyphish.com。 如 有 果 工 程 师 需 要 使 用 这 个 网 站 的 图 标 , 最 好 下 载 到 国内 
的 服务 从， 以 保证 图 片 加 载 速 度 。 


8.5.2 ”定制 风格 导航 工具 栏 


在 前 一 他 中, 我们 实现 了 目 定 义 图 标的 设 定 与 个 性 化 定制 。 在 本 下 中 ,我 们 不 但 文 持 目 定义 
风格 导航 工具 栏 ， 而 且 可 以 通过 浮 于 其 上 的 提示 消息 提供 更 多 信息 给 使 用 者 ， 示 例 图 如 图 8-6 
所 示 。 


i0S 导 航 工具 栏 


自 定义 iDS 风 格 导航 工具 栏 。 


图 8-6 日 定义 风格 导航 工具 栏 


这 里 所 使 用 的 定制 风格 导航 工具 栏 并 不 是 jQuery Mobile 目 市 的 导航 工具 栏 的 样式 ,而 是 通过 
开源 项 目 Bartender ( 其 下 载 地 址 为 https://github.com/frequent/bartender/ ) 对 jQuery Mobile 进 行 扩展 
而 实现 的 。Bartender 的 核心 为 一 个 CSS 样 式 表 ， 对 jQuery Mobile 的 样式 定义 进行 扩展 ， 使 得 导航 
工具 栏 具有 更 强 的 用 户 界 面 效 果 。 

项 目的 演示 地 址 位 于 http:/www.stokkers.mobi/valuables/bartenderhtml。 

要 在 项 目 中 使 用 Bartender， 大 致 需要 如 下 3 个 步骤。 

(1) 定制 Bartender 项 目 中 bartender.css 所 引用 的 图 标 与 data-icon 定 义 。 

(2) 将 bartendercss 引 用 到 需要 文 持 这 种 效果 的 页 面 。 

(3) 使 用 Bartender 项 目 风格 定义 导航 工具 栏 。 

在 Bartender 项 目 中 ， 分 别 定义 了 高 分 辩 率 网 片 和 低 分 辨 率 岁 片 的 样式 ， 如 代码 清单 8-8 所 示 。 


代码 清单 8-8 ”高 分 辨 卒 与 低 分 辩 率 背景 图 片 设置 


.hi-res { 
width: 30px; 
height: 30px; 
background: url("examples/sprite hi-res.png") no-Tepeat 
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margin-left: 70px; 

background-size: 150px 44px; 
-0-background-size: 150px 44px; 
-webkit-background-size: 150px 44px; 
-moz-background-size: 150px 44px; 
-ms-background-size: 150px 44px; 


} 


.lo-res { 
width: 30px; 
height: 30px; 
background: url("examples/sprite lo-res.png") no-repeat; 
margin: -30px 0 0 20px; 


T 
在 低 分 辨 率 环境 下 , 图 片 以 代码 清单 8-9 所 示 的 方式 被 分 隔 开 , 并 定义 在 不 同 的 data-icon 中 。 


代码 清单 8-9 在 低 分 辨 率 下 ， 不 同 CSS 样 式 定 义 不 同 的 分 隔 图 片 和 位 置 


.SoloSprite li a .ui-btn-inner { 
display: inline-block; 
position: static; 
height: 30px; 
width: 30px; 
background-color: none; 
background: url("sprite lo-res.png") no-repeat; 
background-size: 300px 44px; 
-0-background-size: 300px 44px; 
-webkit-background-size: 300px 44px; 
-moz-background-size: 300px 44px; 
-ms-background-size: 300px 44px; 


} 


.SoloSprite li aldata-icon="features" | span:only-child { 
background-position: Opx Opx 


} 


/* 此 处 隐 去 其 他 data-icon 定 义 */ 


在 高 分 辩 率 环境 下 ，CSS 将 加 载 和 处 理 高 分 辨 率 图 片 ， 如 代码 清单 8-10 所 示 。 
代码 清单 8-10 ”高 分 辨 率 下 ， 不 同 CSS 样 式 定义 不 同 的 分 隔 图 片 和 位 置 


@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and 
(min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { 
.SoloSprite li a .ui-btn-inner { 

display: inline-block; 

position: static; 

height: 30px; 

width: 30px; 

background-color: none; 

background: url("sprite hi-res.png") no-repeat; 
background-size: 150px 66px; 
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-0-background-size: 150px 66px; 
-webkit-background-size: 150px 66px; 
-moz-background-size: 150px 66px; 
-ms-background-size: 150px 66px; 

} 

.SoloSprite li aldata-icon="features"] span:only-child { 
background-position:Opx -22px 


} 


/* 此 处 隐 去 其 他 data-icon 定 义 */ 


小 技巧 随 着 移动 设备 尺寸 和 显示 分 辨 窑 的 多 样 化 ， 在 基于 HTML5 和 jQuery Mobile 所 开发 的 应 
用 中 ， 将 会 越 来 越 多 地 使 用 媒体 查询 ( media query ) 技术 ， 建 议 开发 者 在 开发 过 程 中 
能 够 熟练 学 握 这 个 技术 。 


有 别 于 常见 的 jQuery 插件 ， 如 果 希 望 基 于 这 僚 定 制 风 格 的 导航 工具 栏 插件 加 载 更 多 的 图 标 ， 
那么 需要 修改 bartender.css。 将 预 完 定义 好 的 图 标 文件 设置 在 相应 的 CSS 位 置 , 特别 是 如 果 需 要 文 
持 不 同 分 辨识 的 移动 设备 浏览 各 ， 那 么 最 好 也 能 设计 一 僚 高 分 闫 率 的 图 标 ， 以 获得 更 好 的 用 户 
体验 。 

在 开发 这 样 的 导航 工具 栏 中 ,和 之 前 所 见 的 其 他 导航 工具 栏 一 样 , 将 导航 工具 栏 放 在 一 个 页 
脚 工具 栏 中 。 在 ul 的 CSS 定 义 中 添加 apple-navbar-ui 和 comboSprite 属 性 , 此 时 具有 自 定义 按钮 和 
适合 不 同 屏 戎 分辨 座 的 导航 工具 栏 就 初 具 形态 了 。 如 果 需 要 在 导航 工具 栏 中 添加 气泡 提示 ,例如 
新 消息 数量 或 者 一 段 简短 提醒 文字 , 则 可 以 在 <span class="ui-1i-count">newc/span> 中 进行 定义 。 

代码 清单 8-11 是 经 由 Bartender 项 目 美 化 的 导航 工具 栏 代码 片段 。 


代码 清单 8-11 集成 日 定义 图 标 到 导航 栏 ， 并 设置 气泡 提示 new 子 梓 
<1i> 
<a href="#features" data-iconpos="top" data-icon="features"> 
特性 <span class="Ui-1i-count">new</span> 


</a> 
</1i> 


使 用 者 在 基于 Bartender 项 目 开 发 自己 的 导航 工具 柱 时 ， 需 要 注意 下 面 这 些 细 市 。 

口 在 Bartender 项 目 中 ， 图 片 背 景 文件 sprite hi-res.png 和 sprite lo-res.png 只 包含 用 于 演示 的 少 
量 图 标 。 在 开发 者 使 用 的 过 程 中 ， 需 要 结合 目 己 的 需要 制作 合适 的 图 标 。 

口 Bartender 项 目 通过 媒体 查询 在 不 同 移动 设备 分 辨 率 下 加 载 不 同 的 样式 和 网 片 。 作 为 一 种 
有 益 的 经 验 ， 开 发 者 可 以 保留 或 增强 这 样 的 实现 。 

D data-icon 属 性 的 CSS 定 义 位 于 Bartender.CSS 中 ,使 用 者 需要 小 心 定制 此 处 的 定义 。 

完整 的 制定 气泡 提示 的 导航 工具 栏 代 码 如 代码 清单 8-12 所 示 。 
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代码 清单 8-12 ”定制 风格 导航 工具 栏 的 完整 的 HTML 人 代码 示 例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name= Viewport ”content= width=device-width，jinitial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.css" /> 
<link rel="stylesheet" href="bartender/bartender.min.css"” /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="MainPage”data-role="page ”data-title=" 自 定义 风格 导航 工具 栏 "> 
<header data-role="header" data-position="fixed"> 
<h1> 自 定义 风格 工具 栏 </h1> 
</header> 
<div data-role="content"> 
</div> 
<div data-role="footer" data-position= fixed > 
<div data-ITole= navbar ”data-grid= d > 
<ul class="apple-navbar-uicomboSprite"> 
<1i> 
<a href="#features" data-iconpos="top" data-icon="features"> 
特性 <span class="ui-1i-count">new</span> 
</a> 
</1i> 
<1i> 
<a href="#brands" data-iconpos="top" data-icon="brands"> 
品类 《Span class="Ui-1i-count">10</span> 
</ay> 
</1i> 
<1i> 
《<a href="#fees" data-iconpos="top" data-icon="fees"> 
</a> 
</1i> 
<1i> 
<a href="#contact" data-iconpos="top" data-icon="contact"> 
联系 
《</a> 
</1i> 
<1i> 
<a href="#about" data-iconpos="top" data-icon="about"> 
关 本 我们 
</ay> 
</1i> 
</U]> 
</div> 
</div> 
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</Sectiony> 
</body> 
</html> 


注意 单纯 的 HTML 文 件 是 不 能 独立 实现 定制 风格 导航 工具 栏 的 。 如 果 需 要 实现 完整 功能 ， 则 
需要 手工 修改 bartender.css 文 件 。 
定制 风格 导航 工具 栏 时 ， 按 钮 的 背景 图 片 需要 在 CSS 中 定义 。 这 就 需要 修改 bartender.css 
文件 ,这 个 修改 是 重点 所 在 。 具体 的 修改 方法 可 参见 代码 清单 8-8、 代 码 清单 8-9 和 代码 清 
单 8-10 的 相关 介绍 。 


列表 视图 经 常用 于 移动 应 用 的 列表 内 容 管理 , 它 通 过 列表 的 方式 将 内 容 有 序 地 排列 和 管理 起 
来 。 此 外 ,列表 视图 也 可 以 作为 页 面 导 航 使 用 。 在 有 限 的 移动 设备 屏幕 尺寸 下 ,使 用 者 可 以 使 用 
列表 视图 方便 地 实现 导航 菜单 的 功能 。 

在 这 一 草 中 ， 我 们 将 会 了 解 到 : 

口 基本 概念 ; 

口 般 合 列表; 

口 分 类 列表 ; 

口 数字 列表 ; 

口 分 立 按钮 列表 ; 

口 缩 略 网 与 网 标 列表 ; 

口 气泡 提示 ; 

口 只 读 列 表 ; 

口 过 滤 列 表 内 容 ; 

口 插页 列表 ; 

口 折 闭 列表 ; 

口 目 动 分 类 列表 视图 ; 

口 使 用 列表 美化 表单 布局 ; 

口 列表 内 容 排 版 美化 ; 

口 列表 视图 属性 、 选 项 、 方 法 和 事件 ; 

口 高 级 编程 技巧 。 


9.1 基本 概念 


如 果 以 单纯 的 HTML 实 现 一 段 列表 而 言 ， 使 用 jQuery Mobile 实 现 列 表 的 方法 和 面 对 茧 面 应 用 
的 HIML 页面 所 实现 列表 的 方法 相差 无 几 。 对 于 使 用 jQuery Mobile 实 现 移 动 应 用 列表 而 言 ， 简 单 
地 说 ， 只 需要 在 列表 DOM 容 器 上 设置 data-role 属 性 为 listview， 列 表 将 会 被 呈现 为 移动 应 用 风 
格 的 样式 。 
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图 9-1 对 比 了 jQuery Mobile 风 格 的 列表 视图 与 传统 列表 视图 。 之 所 以 会 有 这 样 的 不 同 ， 是 因 
为 在 jQuery Mobile 风 格 的 页 面 中 ， 列 表 DOM 容 需 的 data-role 属 性 被 设置 为 listview。 几 9%-1 左 网 
的 代码 如 代码 清单 9-1 所 示 。 


基本 列表 视图 


传统 列表 视图 


| 


北 
天 
FE 
里 


污 新 扼 


图 9-1 左 图 为 jQuery Mobile 风 格 列 表 视 图 ， 右 图 为 传统 列表 视图 


代码 清单 9-1 jQuery Mobile 列 表 视 图 


<ul data-role="l1istview"> 
《<1i> 北 京 </1i> 
《<1i> 天 津 </1i> 
<1i > 上海 </1i> 
<1i> 重 庆 </1i> 

</Ul> 


在 很 多 实际 应 用 场景 中 ,列表 视图 也 可 以 作为 导航 来 使 用 。 如 琳 需 要 列表 视图 具有 叶 航 功能 ， 
直接 在 列表 项 中 加 入 相应 超级 链接 即 可 ， 代 码 清单 9-2 展 示 了 相关 示例 。 


代码 清单 9-2 导航 列表 视图 


<ul data-role="1listview"> 

<li><a href="http://jqvuerymobile.com" rel="external">jQuery Mobile</a></1i> 

<1li><a href="http://www.ituring.com.cn” rel="external"> 图 只 社区 </a></1i> 

<1li><a href="http://catchexception.net" rel="external">CatchException.NET</a></1i> 
</U]> 


运行 上 述 代码 ， 得 到 的 运行 结果 如 图 9-2 所 示 。 
在 包含 有 超级 链接 的 列表 视图 中 , 在 超级 链接 的 右 侧 默认 会 出 现 一 个 向 右 的 箭头 图 标 ， 以 表 
示 这 个 列表 条 目 是 一 个 超级 链接 。 
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有 价值 的 资源 列表 
jQuery Mobile 


图 灵 社 区 


CatchException.NET 


图 9-2 ”导航 列表 视图 


9.2 邮 套 列表 


顾名思义 , 般 侠 列表 指 的 是 多 于 一 个 层次 的 列表 ,一 级 列表 之 下 包含 大 二 级 或 更 多 级 的 列表 。 
这 样 的 散 僚 可 以 是 一 层 , 也 可 以 是 多 层 。 通 第 骸 侄 深度 不 会 很 大 ， 否则 会 影响 逐 层 进入 和 逐 层 
返回 的 用 户 体 验 。 

如 有 果 想 开发 般 合 列表， 只 需 在 之 前 所 介绍 的 列表 视图 的 基础 上 网 侄 新 的 一 层 列 表 即 可 ,而 下 
一 级 的 般 合 列表 将 会 继承 上 一 级 的 属性 设置 。 例 如， 上 一 级 的 列表 视图 设置 了 茶 个 主题 样式 , 那 
么 下 一 级 所 和 鹏 登 的 列表 将 会 继承 这 些 主题 样式 的 设置 。 

代码 清单 9-3 在 之 前 列表 视图 的 基础 之 上 实现 了 舱 僚 列表 的 功能 。 


代码 清单 9-3 ” 舱 套 列表 


<ul data-role="1listview"> 
《<1i> 北 京 市 
<U]> 
<1i> 朝 阳 区 </1i> 
<1i> 东 城区 </1i> 
<1i> 西 城区 </1i> 
</Ul> 
</1i> 
《<1i> 天 津 市 
<U]> 
<1i> 河 东区 </1i> 
《<1i> 和 平 区 </1i> 
《<1i> 南 开 区 </1i> 
</Ul> 
</1i> 
</U]> 


运行 上 述 代码 ， 得 到 的 结果 如 图 9-3 左 图 所 示 ， 而 图 9-3 右 图 呈现 了 传统 Web 时 面 应 用 的 攀 套 
列表 样式 。 

在 这 个 jQuery Mobile 骸 套 列 表 视 图 中 ， 每 个 城市 艇 套 有 下 一 级 的 区 县 列表 。 可 以 发 现 ， 每 个 
列表 条 目 右 侧 出 现 了 指向 下 一 级 列表 的 向 右 箭头 图 标 。 
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谍 套 列表 视图 传统 列表 视图 


图 9-3” 左 图 为 移动 应 用 列表 视图 ， 右 图 为 果 面 Web 应 用 的 列表 
点 击 “ 北 京 市 ”列表 项 ， 将 会 进入 下 一 级 区 县 列表 ， 如 图 9-4 所 示 。 


$ 


图 9-4” 点击 “北京 市 ”进入 的 区 县 列表 页 
在 能 套 列 表 中 ， 如 果 要 从 下 级 列表 返回 到 上 一 级 ， 在 Android 系 统 中 可 以 直接 使 用 手机 下 方 
的 返回 键 。 但 是 对 于 iOS 操 作 系 统 的 浏览 融 来 说 ， 就 没 那么 方便 了 ， 此 时 开发 者 可 以 通过 加 入 触 
控 操 作 实 现 返 回 或 者 跳 转 到 后 续 页 面 ， 如 轻 扫 或 者 按钮 ， 相 关内 容 可 参见 9.16 节 。 


分 类 列表 通过 分 类 标记 将 不 同类 别 的 内 容 集中 放 在 一 个 列表 中 ， 示 例 图 如 图 9-5 所 示 。 


分 类 列表 视图 


亚 欧 大 陆 
非洲 大 陆 
南美 大 陆 
北美 大 陆 
南极 大 陆 


澳大利亚 大 陆 


图 9-5 分 类 列表 


分 类 列表 视图 是 基于 基本 的 列表 视图 增加 分 类 标签 而 实现 的 ， 分 类 标签 也 是 列表 的 一 部 分 。 
将 包含 有 分 类 信息 的 文字 放置 于 «li data-role="1list-divider"> 标 签 中 ， 就 实现 了 分 类 标签 的 定 
义 。 在 分 类 列表 中 ， 其 他 部 分 的 内 容 和 之 前 所 介绍 的 列表 视图 是 一 样 的 。 

前 面 所 展示 的 分 类 列表 视图 的 代码 如 代码 清单 9-4 所 示 。 在 这 个 代码 片段 中 ， 大 洋 和 大 陆 分 
别 是 两 个 分 类 标签 , 我 们 将 这 两 个 分 类 标签 的 文字 分 别 放 在 data-role 属 性 为 list-divider 的 列表 
项 中 。 


代码 清单 9-4 ”分 类 列表 的 代码 片段 


<ul data-role="1listview"> 
<]i data-role="]list-divider"> 大 洋 </1i> 
《<1i> 大 平 洋 </1i> 
《<1i> 大 西洋 </1i> 
《<1i> 印 度 洋 </1i> 
<1i> 北 冰 洋 </1i> 
<1i data-role="list-divider"> 大 陆 </1i> 
《<1i> 亚 欧 大 陆 </1i> 
<1i> 非 洲 大 陆 </1i> 
<1i> 南 美 大 陆 </1i> 
<1i> 北 美 大 陆 </1i> 
《<1i> 南 极 大 陆 </1i> 
《<1i> 澳 大 利 亚 大 陆 </1i> 
</U]> 


9.4 数字 列表 


数字 列表 的 主要 特点 在 于 ， 在 每 个 列表 项 之 前 呈现 序数 标记 ， 如 图 9-6 所 示 。 数 字 从 1 开始 ， 
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目 上 而 下 依次 递增 。 声 明 数 字 列 表 时 ， 需 要 将 HTML 标记 定义 为 ol ( Ordered List， 有 序列 表 )， 
这 有 别 与 之 前 章节 中 使 用 ul ( Unordered List， 无 序列 表 ) 标签 实现 列表 功能 。 


传统 数字 列表 


图 9-6 ” 左 图 为 jQuery Mobile 风 格 的 数字 列表 视图 ， 右 图 为 传统 数字 列表 


为 使 jQuery Mobile 样 式 应 用 于 数字 列表 ， 同 其 他 列表 一 样 ， 需 要 在 ol 标签 中 声明 data-role 
属性 为 listview。 
代码 清单 9-5 是 数字 列表 的 代码 片段 。 


代码 清单 9-5 “数字 列表 
<01 data-role="1listview"> 
《<1i> 北 京 市 </1i> 
《<1i> 天 津 市 </1i> 
《<1i > 上海 市 </1i> 
<1i> 重 庆 市 </1i> 
</01> 


9.5 分立 按钮 列表 


分 立 按 钮 列表 是 jQuery Mobile 列 表 的 一 种 排版 样式 ， 效 末 如 网 9-7 所 示 。 在 分 立 按钮 列表 中 ， 
每 个 列表 分 为 两 部 分 : 前 面 一 部 分 古 惯 常 的 列表 内 容 , 后 面 一 部 分 位 于 列表 页 面 的 右 侧 , 它 是 独 
闻 的 一 列 ， 包 含有 图 标 按钮 。 

列表 前 半 部 分 的 文字 和 后 半 部 分 的 图 标 可 以 是 相同 的 超级 链接 , 也 可 以 是 不 同 的 。 这 没有 一 
定之 规 ， 完 全 是 基于 应 用 的 使 用 场景 而 定 的 。 

分 立 按钮 列表 的 代码 如 代码 清单 9-6 所 示 。 


9.6” 缩 略图 与 图 标 列表 


分 立 按 钮 列表 视图 


图 9-7 


代码 清单 9-6 分 立 按 钮 列表 


<U] data-role="listview"> 
<]i><a href="#"> 北 京 市 </a><a href="#" data 
<1i><a href="#"> 天 津 市 《</a><a href="#" data 
<]i><a href="#"> 上 海 市 《</a><a href="#" data 
<1i><a href="#"> 重 庆 市 《</a><a href="#" data 
</Ul> 


分 并 按钮 列表 


-ijcon="plus"> 更 多 </a></1i> 
-ijcon="plus"> 更 多 </a></1i> 
-icon="plus" > 更 多 </a></1i> 
-ijcon="plus"> 更 多 </a></1i> 


在 开发 分 立 按钮 列表 的 时 候 ， 开 发 者 需要 注意 两 个 细 记 。 


口 在 上 面 的 示例 代码 中 ， 左 侧 文字 部 分 一 定 要 使 用 超级 链接 标签 包含 文字 内 容 ， 和 否则 可 能 


引起 排版 错位 。 


口 不 建议 在 列表 中 放置 过 长 的 文字 。 列 表 文 字 过 长 ， 则 可 能 会 被 截断 ， 此 时 虽然 可 以 加 入 


换行 以 保证 文字 显示 完整 ， 但 是 ,不同 移动 设备 的 屏 医 太 才 不同 ， 每 行文 字 的 字数 也 不 


尽 相 同 ， 强 制 换 行 也 可 能 导致 界面 排 厂 混乱 。 


小 技巧 jQuery Mobile 为 按钮 列表 提供 了 一 些 默 认 的 图 标 , 开发 者 既 可 以 使 用 这 些 图 标 , 也 可 以 
根据 Web 移 动 应 用 而 使 用 自 定义 的 图 标 按钮 。 如 果 希 望 使 用 自 定义 的 按钮 图 标 , 请 参见 


第 7 草 。 


9.6 ” 缩 略 图 与 图 标 列 表 


综 略 图 列表 是 指 在 列表 项 文字 的 前 方 包含 有 一 个 缩 略 图 , 实现 时 ， 只 需 在 列表 项 文字 之 前 加 


入 几 上 略图 即 可 。 
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实现 缩 略 图 的 代码 如 代码 清单 9-7 所 示 。 
代码 清单 9-7” 缩 略图 列表 视 移 


<ul data-role="1listview"> 
<1i> 
<a href="#"><img src="image/Beijing.jpg"/> 北 京 市 《</a> 
</1i> 
<1i> 
<a href="#"><img src="image/Tianjin.jpg"/> 天 津 市 </a> 
</1i> 
<1i> 
<a href="#"><img src="image/Shanghai.jpg"/> 上 海 市 《</a> 
</1i> 
<1i> 
<a href="#"><img src="image/Chongqing.jpg"/> 重 庆 市 </a> 
</1i> 
</ul> 


在 列表 中 使 用 图 标 与 使 用 缩 略图 的 方法 大 致 相当 , 只 需要 在 图 标 文件 中 添加 class="ui-1i-icon" 
即 可 ， 例 如 ， 


<a href="#"><img src="icon/bj-icon.jpg” class="Ui-1i-icon"/> 北 京 市 《</a> 


从 用 户 体 验 设计 的 角度 而 言 , 在 列表 视图 中 使 用 图 标 和 缩 略 图 存在 一 些 细微 的 差别 , 具体 如 
下 所 不 。 
口 图 标 列表 中 的 图 标 癌 右 和 癌 下 绢 进 更 多 。 
口 在 图 标 列表 中 ， 图 标 信 寸 通 常 更 小 ， 不 会 择 高 列表 。 在 红 略 图 列表 中 ， 如 琳 缩 略图 蜗 度 
较 大 ， 则 会 择 蜗 列 表 。 


9.7 气泡 提示 


在 进行 列表 视图 呈现 的 时 候 , 可 以 加 入 提示 数据 或 者 一 段 短小 的 提示 消息 , 用 以 指导 用 户 操 
作 。 气 泡 提 示 的 呈现 效果 如 图 9-8 所 示 。 

实现 气泡 提示 时 ， 需 要 在 列表 的 基础 上 完成 两 个 步骤 。 

(1) 将 列表 内 容 文字 置 于 超级 链接 标签 ca> 之 中 ,例如 <a href="index.html"> 列 表 项 文字 </a>。 

(2) 在 超级 链接 标签 5a> 内 部 、 列 表 文 字 之 后 添加 气泡 提示 标签 span class="ui-1i-count"> 
气泡 提示 内 容 </spany : 


<1i><a href= # > 特价 展 卖 <Span class="ui-1li-count">new</span></a> 


代码 清单 9-8 是 实现 气泡 提示 的 代码 片段 。 
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图 9-8 气泡 提示 列表 


代码 清单 9-8 气泡 提示 列表 视图 


<U] data-role="listview"> 
<1i> 
<a href="#"> 新 品 上 架 <span class="vUi-1i-count">new</span></a> 
<U]> 
《<1i> 电 器 </1i> 
《<1i> 数 码 </11i> 
《<1i> 图 书 </1i> 
<1i> 家 居 </1i> 
</Uul> 
</1i> 
<1i> 
<a href="#" > 特价 展 卖 <span class="ui-1li-count">90</span></a> 
</1i> 
</U]> 


气泡 提示 的 内 容 既 可 以 是 数字 ,也 可 以 是 文字 。 如 果 是 一 段 文字 提示 , 通 篆 只 是 短语 ， 不 建 
以 放置 大 段 文 字 。 如 末 文 字 过 长 ， 因 为 移动 说 备 的 屏幕 太 才 较 小 ， 界 面 会 很 难看 。 

不 建议 在 黄 侠 列表 中 使 用 气泡 提示 。 如 末 使 用 向 僚 列 表 , 将 会 在 下 一 级 般 套 列表 中 显示 气泡 
提示 文字 。 这 个 提示 文字 的 显示 将 会 使 得 向 套 列 表 的 标题 看 上 去 不 知 所 云 。 如 图 9-9 所 示 ， 在 般 
侠 列 表 的 标题 中 ， 新 品 上 染 是 上 一 级 列表 的 文字 ，new 则 是 气泡 提示 的 文字 。 在 骸 合 列表 中 ， 这 
两 部 分 文字 都 锌 显示 了 出 来 。 

如 果 需 要 同时 实现 藤 套 列表 与 气泡 提示 的 呈现 效 末 , 可 以 开发 多 个 列表 页 面 , 通过 超级 链接 
而 非 般 套 列 表 的 方式 将 这 些 列表 组 织 起 来 。 当 点 击 一 个 列表 中 的 超级 链接 时 ,页 面 将 会 跳 转 到 新 
的 页 面 。 
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图 9-9 气泡 提示 与 般 套 列表 混合 使 用 的 效 采 


9.8 ”只 读 列 表 


只 读 列 表 的 内 容 不 包含 任何 超级 链接 ， 而 只 是 单纯 的 列表 功能 。 实 现 只 读 列 表 时 , 没有 特别 
的 属性 声明 ， 只 是 在 列表 中 不 再 包含 超级 链接 即 可 。 
代码 清单 9-9 是 只 该 列表 的 代码 示例 。 


代码 清单 9-9 ”只 读 列 表 视 图 


<ul data-role="1listview"> 
《<1i> 北 京 </1i> 
<1i> 天 津 </1i> 
<1i> 上 海 </1i> 
<1i> 重 庆 </1i> 

</Ul> 


只 读 列表 所 呈现 的 效果 如 图 9-10 所 示 。 


基本 列表 视图 


图 9-10 ”只 读 列 表 
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9.9 过 滤 列 表 内 容 


受到 移动 设备 界面 尺寸 的 限制 ， 当 列表 条 目 很 多 的 时 候 ， 用 户 很 难 快速 定位 到 列表 内 容 , 过 
滤 列 表 内 容 就 是 为 这 种 场景 设计 的 。 随 着 用 户 的 输入 , 包含 用 户 输入 文字 的 条 目 会 被 日 动 检索 和 
显示 出 来 ,不论 列表 条 目 有 和 多少。 这 个 时 候 ， 用户 输 入 列表 中 可 能 包含 的 是 一 个 字母 、 词 根 或 者 
单词 ,列表 目 动 过 渡 出 包含 这 段 文 字 的 内 容 ， 并 将 显示 范围 缩小 到 一 个 更 精准 的 范围 。 这 样 ,使 
用 者 就 可 以 在 这 个 有 限 的 范围 内 快速 定位 所 感 兴趣 的 内 容 。 

在 图 9-11 所 示 的 这 个 演示 界面 中 ,使 用 者 输入 英文 字母 pb 时， 列表 视图 自动 将 包含 有 字母 p 的 
流行 的 计算 机 语言 检索 出 来 。 


流行 计算 机 语言 流行 计算 机 语言 


Per| 
PL/SQL 
Delphi 
Lisp 
Pascal 

JavaScript 

Perl 

Ruby 


PL/SQAL 


图 9-11 左 图 为 流行 的 计算 机 语言 列表 ， 右 图 为 包含 字母 p 的 语言 9 


要 实现 过 滤 功 能 ， 需 要 在 列表 定义 的 DOM 容 磊 中 声明 data-filter 属 性 为 true。 声 明之 后 ， 
jQuery Mobile 将 目 动 在 列表 开始 的 位 置 添 加 一 个 输入 框 , 使 用 者 可 以 基于 这 个 输入 框 过 滤 列 表 中 
的 内 容 ， 例 如 : 


<ul data-role="listview" data-filter= "true "> ..《/U]> 


实现 过 滤 列 表 功 能 的 代码 片段 如 代码 清单 9-10 所 示 。 
代码 清单 9-10 ”过 滤 列 表 视 图 


<UL data-role="listview" data-filter="true"> 
<1i>C</1i> 
<1i>Java</1i> 
<1i>C++</1i> 
<1i>0bject-C</1i> 
<1i>C#</1i> 


<1i>PHP</1i> 
<1i>Basic</1i> 
<1i>Python</1i> 
<1i>JavaScript</1i> 
<1i>Perl</1i> 
<1i>Ruby</1i> 
<1i>PL/SOL</1i> 
<1i>Delphix</1i> 
<1i>Visual Basic.NET</1i> 
<1i>Lisp</1i> 
<1i>Pascal</1i> 
</Uul> 


如 采 列 表 中 的 内 容 比 较 多 ,即便 使 用 过 滤 条 件 , 依然 需要 使 用 者 从 大 量 列表 条 目 中 进行 人 工 
第 选 。 如 果 开 发 者 在 移动 应 用 的 过 滤 列 表 的 基础 上 增加 分 类 功能 , 那么 使 用 者 检索 内 容 的 效率 将 
会 更 快 。 

在 文 持 分 类 的 过 滤 列 表 中 ， 开 发 者 可 以 对 不 同类 别 的 列表 条 目 进行 分 类 。 在 列表 内 容 被 呈 
现 的 时 候 ， 将 会 显示 分 类 类 目 。 使 用 者 在 输入 过 滤 条 件 的 时 候 ， 分 类 类 目 中 的 文字 不 会 被 过 滤 
筛选 。 如 果 列 表 条 目 中 的 内 容 符合 过 泪 条 件 ， 在 呈现 列表 条 目的 时 候 ， 所 属 分 类 类 目 也 将 被 一 
同 呈 现 。 

在 图 9-12 所 呈现 的 界面 示例 中 , 当 输 入 英文 字母 e 之 后 , 包含 字母 e 的 国家 列表 条 目 被 过 滤 出 ， 
同时 相应 的 分 类 类 目 也 一 并 被 显示 出 来 。 


国家 地 区 列表 


Algeria 
Angola 
Benin 


Botswana Armenia 


Burkina Faso Azerbaijan 


Abkhazia 
Afghanistan 
Armenia 


Azerbaijan 


图 9-12 ”支持 分 类 的 过 滤 列 表 视 图 


要 想 实现 支持 分 类 功能 的 过 小视 图 ， 大 体 需 要 两 个 步 又 。 

首先 , 按照 分 类 原则 将 列表 条 目 排 列 在 一 起 。 例如， 在 上 面 这 个 示例 中 ,我 们 以 五 大 洲 对 国 
家 进行 分 类 。 然 后 ,添加 各 个 分 类 类 目 在 各 类 列表 条 目 之 前 ,例如 在 非洲 国家 列表 之 前 添加 名 为 
Africa 的 分 类 关 目 ， 而 在 亚洲 国家 列表 之 前 添加 名 为 Asia 的 分 类 类 目 。 
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分 类 类 目的 添加 方法 为 添加 一 个 data-role 属 性 为 list-divider 的 列表 条 目 , 列表 中 的 文字 就 
是 分 类 类 目的 名 称 ， 例 如 <1i data-role="list-divider">Africa</1i>。 
图 9-12 过 波 列 表 视 网 的 完整 代码 如 代码 清单 9-11 所 示 。 


代码 清单 9-11 支持 分 类 的 过 滤 列 表 视 图 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="Mainpage”data-role="page”data-title=" 列 表 视 图 "> 
<header data-role="header"> 
<h1> 国 家 地 区 列表 </h1> 
</header> 
<div class="content" data-role="content"> 
<ul data-role="listview" data-filter="true"> 
<1i data-role="list-divider">Africa</1i> 
<1i>Algeriax</1i> 
<1i>Angola</1i> 
<1i>Benin</1i> 
<1i>Botswana</1i> 
<1i>Burkina Faso</1i> 
<1i data-role="list-divider">Asia</1i> 
<1i>Abkhaziax</1i> 
<1i>Afghanistan</1i> 
<1i>Armenia</1i> 
<1i>Azerbaijan</1i> 
<1i data-role="list-divider">Europe</1i> 
<1i>Aland Islands</1i> 
<1i>Albania</1i> 
<1i>Andorra</1i> 
</Uul> 
</div> 
<«/section> 
</body> 
</html> 


很 多 情况 下 ， 列 表 中 的 条 目 有 多 种 不 同 的 表达 方式 ， 例 如 ,刘备 ， 姓 刘 ， 和 名 备 ， 字 玄 德 ， 讶 

昭 列 星 帝 ， 唐 号 烈 祖 ， 史 家 称 为 先 主 。 因 为 曾经 担任 豫州 牧 ， 所 以 后 人 也 称 之 为 刘 驳 州 。 如 此 
Pn 在 列表 视图 中 都 对 应 到 一 条 记录 ， 那 就 是 “刘备 "”。jQuery Mobile 提 供 了 一 种 隐藏 数 
据 过 滤 的 方式 , 能 够 将 所 有 这 些 信息 作为 索 引 条 件 进 行 数据 过 波多 选 。 基 于 这 样 的 方式 所 开发 的 
移动 应 用 ， ee 1 知 要 输入 相应 的 关键 字 。 此 时 当 查 找 “ 刘 驳 州 ”的 时 候 ， 就 会 得 到 “ 刘 备 ” 
这 个 列表 条 目 
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实现 隐 含 数据 过 滤 , 需要 列表 条 目 上 添加 data-filtertext 属 性 , 并 将 所 相关 的 关键 词 数值 列 
在 这 个 属性 中 ， 实 现代 码 如 下 : 


<li data-filtertext=" 刘 备 玄 德 昭 烈 皇 沉 烈 祖 刘 绚 州 "><a href="#"> 刘 备 </a></1i> 


9.10 插页 列表 


插页 列表 是 在 jQuery Mobile 1.2 中 增加 的 新 特性 ， 在 列表 视图 的 外 边 呈 现 一 个 圆 角 矩形 框 ， 
使 用 者 可 以 很 清楚 地 知道 列表 视图 的 范围 ， 这 样 的 界面 呈现 很 适合 内 容 相 对 较 多 的 页 面 。 在 图 
9-13 中 ,包含 有 两 个 列表 ， 上 方 的 插页 列表 列 出 了 四 大 洋 ,， 下 方 的 列表 视图 列 出 了 主要 大 陆 。 搬 
页 列表 前 面 的 说 明文 字 “ 大 洋 ” 不 会 被 履 庆 到 ， 普 通 列 表 视 图 之 前 的 说 明文 子 锌 覆盖 挥 了， 这 也 
是 普通 列表 视图 与 插页 列表 的 不 同 。 因 为 插页 列表 是 以 内 联 方式 呈现 的 , 所 以 插页 列表 的 内 容 不 
会 被 上 柳 兰 掉 ; 普通 的 列表 视图 因为 不 是 内 联 方式 呈现 的 ， 所 以 部 分 文字 可 能 会 被 黎 兰 卸 。 


插页 列表 


图 9-13 ”上 方 为 插页 列表 ， 下 方 为 列表 视图 


要 实现 插页 列表 功能 ， 需 要 在 列表 容 右 中 声明 data-inset 属 性 为 true。 
图 9-13 所 对 应 的 页 面 的 代码 如 代码 清单 9-12 所 示 。 


代码 清单 9-12 ”图 9-13 所 对 应 的 页 面 的 代码 


<div class="content" data-role="content"> 
大 洋 
<ul data-role="listview" data-inset="true"> 
<1i> 太 平 洋 </1i> 
<1i> 大 西洋 </1i> 
<]1i> 印 度 洋 </1i> 
《<1i> 北 冰 洋 </1i> 
</U]> 
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大 陆 

<UL data-role="listview"> 
《<1i> 亚 欧 大 陆 </1i> 
<1i> 非 洲 大 陆 </1i> 
<1i> 南 美 大 陆 </1i> 
<1i> 北 美 大 陆 </1i> 
《<1i> 南 极 大 陆 </1i> 
<1i> 澳 大 利 亚 大 陆 </1i> 

</U]> 

</div> 


注意 ”在 jQuery Mobile 1.2.0 和 之 前 版 本 中 , 所 呈现 的 只 读 插页 列表 只 是 略微 有 点 差异 。 在 jQuery 
Mobile 1.2.0 的 只 读 插 页 列表 中 ， 列 表 字 体 、 间 距 、 列 表 背 景 颜色 等 发 生 了 一 些 调整 。 经 
过 调整 之 后 ，jQuery Mobile 1.2.0 的 插页 列表 更 方便 使 用 者 阅读 其 中 的 内 容 。 
图 9-14 所 示 的 两 个 界面 截屏 分 别 是 jQuery Mobile 1.1.0 ( 左 图 ) 和 jQuery Mobile 1.2.0 的 插 
页 列表 效果 ( 右 图 ), 我 们 发 现 ， 自 jQuery Mobile 1.2.0 之 后 ， 插 页 列表 的 高 度 增加 了 ， 触 
控 操 作 更 加 方便 了 。 


插页 列表 


亚 欧 大 陆 


非洲 大 陆 


南美 大 陆 


北美 大 陆 


南极 大 陆 


图 9-14 左 图 为 jQuery Mobile 1.1.0 的 只 读 插 页 列表 ， 右 图 为 jQuery Mobile 1.2.0 的 只 读 
插页 列表 


因为 能 够 通过 内 联 方式 很 好 地 与 页 面 内 容 集成 在 一 起 ， 并 能 帮助 呈现 出 标准 化 的 用 户 界 面 ， 
所 以 插页 列表 是 使 用 最 为 广泛 的 列表 视图 之 一 。 

插页 列表 可 以 与 几乎 所 有 其 他 列表 视图 集成 ， 以 呈现 出 不 同 的 插页 列表 样式 ， 包 括 : 

口 普通 插页 列表 ; 

口 数字 插页 列表 ; 
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口 气泡 提示 插页 列表 ; 

口 缩 略 网 插页 列表 ; 

口 分 立 按钮 搬 页 列表 ; 

口 图 标 插页 列表 ; 

口 文 持 检索 内 容 的 插页 列表 ; 

口 分 组 插页 列表 (jQuery Mobile 1.2.0 开 始 提供 )。 

这 些 列表 视图 在 没有 超级 链接 的 时 候 ， 也 都 将 呈现 为 只 读 择 页 列表 的 样式 。 


9.11 折 色 列表 


折 欠 列表 视图 是 列表 视图 的 一 种 ,能 够 将 列表 折合 起 来 只 显示 列表 的 名 称 ， 如 图 9-15 左 图 所 
不。 如 来 需要 ， 可 以 点 击 列表 的 名 称 而 将 折合 的 列表 展开 ， 如 图 9-15 右 图 所 示 。 


折合 列表 视图 折 登 列表 视图 


图 9-15 ” 折 和 县 列表 


要 实现 折 和 登 列表 ,需要 在 列表 视图 之 外 增加 一 个 data-role 为 collapsible 的 div 容 需 。 在 容 需 
中 ， 通 过 标题 标签 声明 折 炙 视图 的 名 称 ， 示 例 代 码 如 下 : 

<div data-role="collapsible"> 

<h2> 折 登 列表 标题 </h2> 

<ul data-role="listview"> 

《1-- 这 里 为 列表 视图 的 内 容 --> 

</U]> 

</div> 


折 又 列表 中 包含 的 列表 视图 可 以 是 之 前 介绍 的 各 种 列表 视图 , 例如 分 类 列表 、 数 字 列 表 、 分 
立 按钮 列表 、 缩 略图 和 图 标 列 表 、 和 气泡 提示 列表 、 只 读 列 表 等 。 
图 9-15 对 应 的 代码 示例 如 代码 清单 9-13 所 示 。 
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代码 清单 9-13 ” 折 对 列表 


<!lDOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name= Viewport ”content= width=device-width，jinitial-scale=1 > 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
«script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="Mainpage”data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 折 登 列 表 视 图 </h1> 
</header> 
<div data-role="collapsible"> 
<h2> 省 份 列表 </h2> 
<ul data-role="1listview"> 
<1i> 北 京 </1i> 
《<1i> 天 津 </1i> 
《<1i> 河 北 </1i> 
《<1i> 河 南 </1i> 
<1i> 山 西 </1i> 
<1i> 山 东 </1i> 
《<1i> 内 蒙古 </1i> 
《<1i> 湖 北 </1i> 
<1i> 湖 南 </1i> 
<1i> 广 东 </1i> 
<1i> 广 西 </1i> 
</U]> 
</div> 
</section> 
</body> 
</html> 


如 来 需 要 将 多 个 折合 列表 视图 以 集合 的 形式 排列 在 一 起 , 可 以 使 用 折 和 县 列表 集合 。 如 采 这 个 
集合 的 各 个 列表 都 折 县 起 来 , 那么 这 个 折合 列表 集合 的 呈现 效 琳 束 好 像 各 个 列表 标题 又 组 成 一 个 
列表 。 打 开 每 个 折合 列表 的 标题 之 后 ， 叉 会 呈现 其 中 的 视图 内 容 ， 效 末 如 图 9-16 所 示 。 

要 实现 折 又 列表 和 集合， 首先 要 建立 data-role 属 性 为 collapsible-set 的 div 容 人 胡 。 在 这 个 div 
容 帮 中 ,顺序 排列 了 各 个 折合 列表 人 视图。 这样， 各 个 折合 列表 集成 在 一 个 更 大 的 集合 中 ,就 形成 
丁 折合 列 表 集 合 ， 其 代码 如 下 所 示 : 

<div data-role="collapsible-set"> 

<div data-role="collapsible"> 
<h2> 第 一 个 折合 列表 </h2> 
<ul data-Tole= ]istview > 
《1-- 这 里 为 列表 视图 内 容 --> 
</ul> 


</div> 
<div data-role="collapsible"> 
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<h2> 第 二 个 折 酸 列表 </h2> 
<UL data-role="listview"> 
《1-- 这 里 为 列表 视图 内 容 --> 
</U]> 
</div> 
</div> 


5 


国 192.168.1.100/jqgm/Sectio 


折 局 列表 集合 


图 9-16 ” 折 著 列表 集合 


在 折合 列表 集合 中 ,各 个 折合 列表 视图 默认 是 折合 起 来 的 ,每 次 只 能 展开 一 个 折 舍 列表 视图 ， 
当 展 开 第 二 个 时 ， 前 一 个 会 日 动 折合 起 来 。 
图 9-16 对 应 的 代码 如 代码 清单 9-14 所 示 。 


代码 清单 9-14 折 闭 列表 集合 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-Tole= header > 
<h1> 折 全 列表 集合 </h1> 
</header> 
<div data-role="collapsible-set" data-theme="b" data-content-theme="d"> 
<div data-role="collapsible"> 
<h2> 华 北 </h2> 
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<ul data-role="listview"> 
《<1i> 北 京 </1i> 
《<1i> 天 津 </1i> 
《<1i> 河 北 </1i> 
<] > 山西 《/]1> 
《<1i> 内 蒙古 西部 </1i> 
</Ul> 
</div> 
<div data-role="collapsible"> 
<h2> 东 北 </h2> 
<ul data-role="listview"> 
《<1i> 辽 宁 </1i> 
<1i> 吉 林 </1i> 
<1i> 黑 龙 江 </1i> 
《<1i> 内 蒙古 东部 </1i> 
</Ul> 
</div> 
<div data-role="collapsible"> 
<h2> 华 中 </h2> 
<ul data-role="listview"> 
《<1i> 河 南 </1i> 
<1i> 湖 北 </1i> 
《<1i> 湖 南 </1i> 
</Ul> 
</div> 
</div> 
</Sectiony> 
</body> 
</html> 


默认 的 折合 列表 集合 痢 是 以 内 联 样 式 呈 现 的 , 除非 特别 声明 列表 视图 是 非 内 联 的 。 声明 折 苇 
列表 集合 为 非 内 联 方 式 时 ,和 害 要 在 折合 列表 集合 的 容 带 中 将 data-inset 属 性 设置 为 false: 
<div data-role="collapsible-set" data-inset="false"> 


《1-- 这 里 是 各 个 集合 列表 视图 --> 
</div> 


小 经 验 折 有 过 列表 和 折 县 内容 块 从 HTML 的 属性 定义 到 哇 现 样 式 上 都 非常 接近 , 折 营 列表 或 折 受 
列表 集合 是 面向 列表 视图 设计 的 ， 而 折 党 内容 块 或 折 堂 内容 集 合 是 面向 文本 、 图 片 等 
内 容 设 计 的 。 


这 里 需要 说 明 的 是 ， 在 jQuery Mobile 1.2.0 之 前 的 版 本 中 并 不 支持 折 有 列表。 


9.12 ”有 目 动 分 类 列表 视图 


在 之 前 的 分 类 列表 中 ,我们 通过 程序 设 定 分 类 标签 并 由 此 进行 分 类 。 从 1.2.0 版 本 开始 ,jQuery 
Mobile 提 供 了 能 够 日 动 分 类 的 列表 视图 。 基 于 自动 分 类 列表 视图 ， 对 于 列表 条 目 相 邻 的 内 容 ， 如 
东 第 一 个 字符 或 第 一 个 汉字 相同 , 那么 将 会 被 目 动 分 类 在 一 起 , 而 分 类 标签 就 是 第 一 个 字符 或 者 
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第 一 个 汉字 。 这 样 的 功能 设计 有 助 于 用 户 快速 识别 与 定位 所 要 查找 的 内 容 ， 如 果 与 检索 列表 内 容 
的 功能 配合 使 用 , 或 者 将 折 双 列表 与 自动 分 类 列表 视图 混合 使 用 , 将 可 能 明显 改善 列表 内 容 查 找 
的 用 户 体 验 。 图 9-17 就 是 这 样 的 自动 分 类 列表 视图 。 


自动 分 类 列表 视图 自动 分 类 列表 视图 


A 

Afghanistan 
Albania 
Algeria 

B 

Bahamas, The 
Bahrain 
Bangladesh 

C 

Cambodia 


Cameroon 


Canada 
图 9-17 目 动 分 类 列表 视图 


要 实现 目 动 分 类 列表 视图 ， 大 致 需要 两 个 步 又 。 

(1) 在 列表 内 容 输出 的 时 候 ， 需 要 排序 之 后 再 输出 到 列表 视图 中 ， 和 否则 ， 即 便 存 在 两 个 列表 
条 目 , 它们 的 首 字 母 或 第 一 个 汉字 相同 但 是 不 相 邻 在 一 起 , 也 是 无 法 实现 目 动 分 类 之 后 在 一 起 呈 
现 的 效 朱 的 。 

(2) 在 列表 视图 DOM 容 佑 中 ， 声 明 data-autodividers 属 性 为 true: 

<ul data-role="listview" data-autodividers= true > 

完成 这 样 两 个 步骤 之 后 ， 就 可 以 呈现 目 动 列表 视图 了 。 

完整 的 目 动 列表 视图 的 代码 如 代码 清单 9-15 所 示 。 


代码 清单 9-15 ”自动 列表 视图 


<《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../jJs/jqvery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
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<header data-role="header"> 
<h1> 自 动 分 类 列表 视图 </h1> 
</header> 
<div class="content" data-role="content"> 
<UL data-role="listview" data-dividertheme="e" data-autodividers="true"> 
《<1i> 北 京 </1i> 
《<1i> 天 津 </1i> 
《<1i> 河 北 </1i> 
《<1i> 河 南 </1i> 
《<1i> 山 西 </1i> 
<1i> 山 东 </1i> 
<1i> 内 蒙古 </1i> 
<1i> 湖 北 </1i> 
《1 > 湖南 </]11> 
<1i> 广 东 </1i> 
《<1i> 广 西 《</1i> 
</ul> 
</div> 
<«/section> 
</body> 
</html> 


自动 分 类 列表 视图 和 之 前 介绍 的 列表 视图 有 两 个 不 同 之 处 ， 具 体 如 下 所 示 。 
口 在 DOM 容 右 中 ， 自 动 分 类 列表 视图 增加 了 data-autodividers 属 性 ， 这 在 列表 视图 中 是 没 
有 的 。 
口 在 列表 视图 中 ， 可 以 在 列表 项 目 中 通过 设 定 data-role 属 性 为 list-divider 来 标记 这 个 条 
目 是 分 类 标签 ， 这 在 目 动 分 类 列表 视图 中 是 不 需要 的 。 
自动 分 类 列表 也 可 以 与 前 一 方 的 折 革 列表 混合 使 用 ， 以 方便 用 户 快 速 定 位 内 容 ， 如 图 9-18 所 
示 。 在 这 个 省 份 列表 的 场景 中 ， 折 著 列 表 中 骸 僚 的 是 一 个 自动 分 类 列表 视图 的 省 份 列表 。 


自动 分 类 列表 的 -. 自动 分 类 列表 的 -- 


图 9-18 ” 折 针 列表 与 自动 分 类 列表 混合 使 用 的 场景 
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在 图 9-18 所 示 的 应 用 场景 中 ， 折 县 列表 的 div 容 从 被 定义 在 外 层 ， 目 动 分 类 列表 的 岂 容 需 被 
定义 在 内 层 ， 对 应 的 完整 代码 如 代码 清单 9-16 所 示 。 


代码 清单 9-16” 折 县 列表 与 日 动 分 类 列表 视 图 混合 使 用 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 自 动 分 类 列表 的 混合 使 用 </h1> 
</header> 
<div data-role="collapsible"> 
<h2> 省 份 列表 </h2> 
<U] data-role="listview" data-dividertheme="e" data-autodividers= "true "> 
《<1i> 北 京 </1i> 
《<1i> 天 津 </1i> 
《<1i> 河 北 </1i> 
《<1i> 河 南 </1i> 
《<1i> 山 西 </1i> 
<1i> 山 东 </1i> 
<1i> 内 蒙古 </1i> 
<1i> 湖 北 </1i> 
<1i> 湖 南 </1i> 
<1i> 广 东 </1i> 
《1> 广 西 4/]iy> 
</U]> 
</div> 
<«/section> 
</body> 
</html> 


注意 ”开发 者 在 生成 自动 分 类 列表 视图 的 列表 内 容 时 ， 最 好 根据 首 字 母 或 者 第 一 个 汉字 进行 排 
序 。 如 果 列 表 内 容 不 按照 首 字母 或 者 第 一 个 汉字 排序 ， 可 能 会 出 现 两 个 首 字 母 或 第 一 个 
汉字 名 称 相 同 的 分 组 ， 且 位 于 自动 分 类 列表 的 不 同位 置 。 


9.13 ”使 用 列表 美化 表单 布局 
列表 或 者 插页 列表 可 以 用 于 美化 表单 样式 。 经 过 美化 之 后 ， 表 单元 素 的 布局 更 加 规整 ,表单 
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操作 起 来 更 加 方便 ， 如 图 9-19 所 示 。 


图 9-19 包含 有 表单 的 插页 列表 


有 很 多 方法 可 以 使 用 列表 视图 来 美化 表单 。 在 这 些 列表 视图 样式 中 , 使 用 最 多 的 是 插页 列表 
或 者 只 恋 列 表 视 图。 对 于 表单 元 素 的 排列 方法 ， 一 般 情 次 下 是 每 行 一 个 表单 元 素 。 
使 用 列表 格式 化 表单 布局 时 ， 在 将 表单 元 素 依 次 排列 在 列表 视图 之 外 ， 还 有 两 个 细 记 需要 


JU OD 


(1) 作为 表单 元 条 的 <1li> 容 各 需要 设置 data-role 属 性 为 fieldcontain。 

(2) 如 果 将 按钮 作为 列表 的 一 部 分 ， 则 需要 将 其 放 入 fieldset 容 入， 然后 骨 将 fieldset 放 入 
<1i> 容 关中 。 

经 过 列表 视图 美化 的 图 9-19 的 登录 界面 的 代码 可 参见 代码 清单 9-17。 


代码 清单 9-17 使 用 列表 视图 美化 的 登录 界面 的 代码 


<div class="content" data-role="content"> 
登录 
<form> 
<ul data-role="listview" data-inset="true"> 
<1i data-role="fieldcontain"> 
<label for="name"> 登 录 名 :</1abel> 
<input type= text”name= name” id="name" value="" /> 
</1i> 
<1i data-role="fieldcontain"> 
<label for="name" > 密码:</1abel> 
<input type="Password" name="password" id="password" value=""/> 
</1i> 
<1i data-role="fieldcontain"> 
<fieldset class="vui-grid-a"> 
<div class="vi-block-a"> 
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<button type="submit"” data-theme="d"> 取 消 </button> 
</div> 


<div class="ui-block-b"> 


<button type="submit” data-theme="a"> 提 交 </button> 
</div> 


</fieldset> 
</1i> 
</ul> 
</form> 
</div> 


在 上 面 的 代码 中 , 我 们 并 没有 使 用 内 联 按钮 样式 进行 布局 ,而 是 通过 声明 布局 的 样式 进行 布 
局 管理 .首先 ,在 fieldset 中 通过 ui-grid-a 声 明 每 行 包含 两 栏 , 然后 在 各 个 按钮 中 声明 ui-block-a 
为 第 一 栏 内 容 ，ui-block-b 为 第 二 栏 内 容 ， 具 体内 容 请 参考 11.3 市 。 


9.14 美化 列表 内 容 


在 列表 视图 中 使 用 HTML 和 CSS 来 美化 排版 样式 ， 将 可 以 设计 出 很 多 有 趣 的 列表 页 面 效 果 。 
在 图 9-20 所 示 的 界面 中 ， 分别 集成 了 下 面 这 些 技术 : 

口 分 类 列表 视图 ; 

口 列表 标题 ; 

口 列表 内 容 ; 

口 超级 链接 的 列表 项 目 与 图 标 显 示 ; 

口 列表 条 目 右 上 角 的 备注 信息 ， 一 般 为 “了 解 更 多 ”。 


列表 视图 样式 美化 


图 9-20 ”列表 视图 的 美化 


要 实现 这 种 经 过 HTML 排 版 的 界面 样式 ， 首 先 要 在 各 个 列表 条 上 日 内 部 进行 HTML 排 版 。 下 面 
这 段 代码 实现 了 一 个 典型 的 用 HTML 排 版 的 列表 : 
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<1i> 
<a href="#"> 
<h1> 印 度 洋 </h1> 
《p> 世界 第 三 大 洋 ，7491 万 平方 公里 《</p> 
<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a> 
</1i> 


在 经 过 HTML 排 版 美化 的 列表 视图 内 ， 列 表 条 目标 题 通过 <h1> 到 <h6> 的 标题 实现 。 至 少 在 已 
经 正式 发 行 的 jQuery Mobile 版 本 中 ，<h1> 到 <h6> 在 这 样 的 列表 视图 中 所 呈现 的 效果 是 一 样 的 。 

在 标题 之 后 ， 通 过 <p> 分 段 标 签 包 含 各 个 说 明文 字 ， 例 如 在 图 9-20 中 <p> 标 签 包含 了 对 各 个 地 
理 概 念 的 介绍 。 在 <p> 段 落 标签 中 , 设 定 class 属 性 为 ui-1i-aside， 表 示 这 段 文 字 位 于 列表 视图 条 
目的 右上 方 。 

图 9-20 所 示 页 面 的 完整 代码 如 代码 清单 9-18 所 示 。 


代码 清单 9-18 ”经 过 HTML 排 版 美化 的 列表 视图 


<!1DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="Mainpage”data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 列 表 视 图 样式 美化 </h1> 
</header> 
<div class="content" data-role="content"> 
<ul data-role="listview" data-dividertheme="e"> 
<1li data-role="]list-divider"> 大 洋 </1i> 
<]Li><a href="#"> 
<h1> 
<h1> 太 平 洋 </h1> 
《<P》 面 积 最 大 ，1 亿 5 千 多 万 平方 公里 </p> 
<p class="ui-]li-aside"> 了 解 更 多 </p> 
</a></1i> 
<l1i><a href="#"> 
<h1> 大 西洋 </h1> 
<p> 世 界 第 二 大 洋 ，8221 万 平方 公里 </p> 
<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<1i><a href="#"> 
<h1> 印 度 洋 </h1> 
<p> 世 界 第 三 大 洋 ，7491 万 平方 公里 </py> 
<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<1i><a href="#"> 
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<h1> 北 冰 洋 </h1> 

《p>1405 万 平方 公里 </p> 

<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<1i data-role="list-divider"> 州 别 </1i> 
<li><a href="#"> 

<h1> 亚 洲 </h1> 

《p>4382 万 平方 公里 </p> 

<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<li><a href="#"> 

<h1> 非 洲 </h1> 

《p>3037 万 平方 公里 </p> 

<p class="ui-1li-aside"> 了 解 更 多 </p> 
</a></1i> 
<li><a href="#"> 

<h1> 北 美洲 </h1> 

《p>2449 万 平方 公里 </p> 

<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<l1i><a href="#"> 

<h1> 南 美洲 </h1> 

《p>1784 万 平方 公里 </p> 

<p class="ui-1li-aside"> 了 解 更 多 </p> 
</a></1i> 
<1i><a href="#"> 

<h1> 南 极 洲 5/h1> 

<p>1372 万 平 万 公里 《/p> 

<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
<li><a href="#"> 

<h1> 欧 洲 </h1> 

《p>1018 万 平方 公里 </p> 

<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></1i> 
《Li><a href="#"> 

<h1> 大 洋 洲 </h1> 


《<p>900 万 平方 公里 </p> 
<p class="ui-1i-aside"> 了 解 更 多 </p> 
</a></]iy> 
</U]> 
</div> 
</section> 
</body> 
</html> 


由 于 分 段 标签 <p> 所 包含 的 内 容 一 般 不 会 折 行 显示 ， 所 以 其 中 的 文学 长 度 通 第 会 受到 限制 。 
如 有 果 分 段 标 签 <p> 内 的 文字 较 多 ，jQuery Mobile 将 会 隐藏 超过 冤 度 的 文学 ， 这 将 影响 用 户 的 阅读 
体验 。 例 如 ,单独 修改 印度 洋 的 介绍 ， 加 入 更 多 的 相关 信息 : 


《> 
<a href="#"> 
<h1> 印 度 洋 </h1> 
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《p> 世界 第 三 大 洋 ，7491 万 平方 公里 《</p> 
<p> 位 于 亚洲 、 非 洲 、 大 洋 洲 和 南极 洲 之 间 ， 大 部 分 在 南半球 ， 约 占 世 界 海洋 总 面积 的 21.1%。 印 度 洋 的 范围 


北 至 印度 次 大 陆 及 阿拉 伯 半 岛 (南亚 及 西亚 )， 西 达 东 非 ， 东 侧 则 以 印度 尼 西 亚 、 跨 他 群岛 及 澳大利亚 为 界 ， 
南 迁 南 冰 洋 (也 有 定义 至 南极 洲 )。</p> 
<p class="ui-1i-aside"> 了 解 更 多 </p> 


</a> 
</1i> 


从 图 9-21 中 可 以 看 到 ， 如 果 文 字 超 过 屏 疾 显 示范 围 ， 则 超过 部 分 会 被 覆盖 掉 ， 所 以 建议 开发 
者 在 排版 列表 视图 的 内 容 时 ,注意 一 下 学 数 。 鉴 于 不 同 移动 设备 的 显示 屏 尺 寸 不 同 ， 所 能 容纳 的 
文字 长 度 也 不 同 ， 所 以 目标 受众 的 移动 设备 显示 屏 尺寸 也 是 在 移动 应 用 设计 阶段 需要 考虑 的 。 


列表 视图 样式 美化 


图 9-21 文字 超 长 的 说 明文 字 
如 采 一 定 要 在 列表 条 目 中 包含 大 量 问题 ， 而 且 文 持 折 行 显示 的 话 ， 可 以 对 <p> 段 洲 标 签 定 义 
单独 的 CSS 样 式 ， 声 明 以 正 稼 方式 显示 ， 相 关 代 码 如 下 : 


<style type="text/css"> 
.longContent { 
white-space: normal !important; 
} 
</style> 
注意 ， 需 要 在 这 个 CSS 定 义 中 声明 !important， 以 保证 这 个 设置 能 够 生效 。 


然后 ， 在 相应 的 <p> 段 落 标 签 中 设置 这 个 CSS 样 式 定 义 : 


<p class="longContent">..</p> 


说 明文 字 超 长 的 列表 视图 的 完整 代码 如 代码 清单 9-19 所 示 ， 呈 现 效 果 如 图 9-22 所 示 。 
代码 清单 9-19 ”支持 折 行 显示 的 列表 视图 
《1DOCTYPE html> 


<html> 
<head> 
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<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<style type="text/css"> 
.longContent { 
white-space: normal !important; 
} 
</style> 
</head> 
<body> 
<Section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 列 表 视 图 样式 美化 </h1> 
</header> 
<div class="content" data-role="content"> 
<ul data-role="listview" data-dividertheme="e"> 
<]i data-role="list-divider"> 大 洋 </1i> 
<l1i><a href="#"> 
<h1> 印 度 洋 </h1> 
《<p> 世 界 第 三 大 洋 ，7491 万 平 万 公里 《/py> 
<p class="longContent"> 位 于 亚洲 、 非 洲 、 大 洋 洲 和 南极 洲 之 间 ， 大 部 分 在 南半球 。 约 占 世 界 
海洋 总 面积 的 21.1%。 印 度 洋 的 范围 北 至 印度 次 大 陆 及 阿拉 伯 半 岛 (南亚 及 西亚 ) ， 西 达 东 非 ， 
东 侧 则 以 印度 尼 西 亚 、 咽 他 群岛 及 澳大利亚 为 界 ， 南 迄 南 冰 洋 (也 有 定义 至 南极 洲 ) 。</p> 
<p class="ui-1li-aside"> 了 解 更 多 </p> 
</a></1i> 
</U]> 
</div> 
<«/section> 
</body> 
</html> 


列表 视图 样式 美化 


图 9-22” 折 行 显示 效果 
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9.15 ”列表 视图 属性 、 选 项 、 方 法 和 事件 
在 开发 列表 视图 功能 的 时 候 , 可 以 通过 JavaScript 对 其 界面 风格 样式 与 主题 进行 设 定 , 也 可 以 


通过 列表 视图 方法 刷新 或 获得 下 一 级 页 面 的 内 容 。 


9.15.1 属性 


列表 视图 属性 是 定义 在 列表 视图 容 硕 中 的 属性 , 用 以 定义 列表 视图 的 不 同 页 面 元 系 样 式 。 沼 


用 的 列表 视图 属性 如 表 9-1 所 示 。 


属 性 


data-count-theme 


设置 气泡 提示 主题 风格 ， 默 认为 c。 


data-dividertheme 


data-filter 


data-filter-placeholder 


data-filter-theme 


data-header-theme 


data-inset 


<U] data-role="listview" data-inset="true"> 


表 9-1 列表 视图 属性 


含 义 


示例 代码 : 

<ul data-role="listview" data-count-theme="e"> 

设置 分 类 列表 中 分 类 栏目 的 显示 主题 风格 ， 默 认为 b。 

此 属性 只 对 分 类 列表 有 效 ， 对 其 他 类 型 列表 无 效 。 

示例 代码 : 

<UL data-role="listview" data-dividertheme="e"> 

设置 是 否 显 示 检 索 工 具 栏 。 

默认 为 false， 不 显示 检索 工具 栏 。 

设置 为 true， 则 显示 检索 工具 栏 。 

示例 代码 : 

<UL data-role="listview" data-filter="true"> 

设置 检索 工具 栏 的 背景 文字 。 默 认为 Filter items…。 

此 属性 只 对 具有 检索 功能 的 列表 有 效 。 如 果 列 表 没 有 检索 功能 ， 则 此 属性 无 效 。 
示例 代码 : 

<ul data-role="listview" data-filter="true” data-filter-placeholder=" 查 找 "> 
设置 检索 工具 栏 的 主题 样式 。 默 认为 b 主 题 样式 。 

此 属性 只 对 具有 检索 功能 的 列表 有 效 。 如 果 列 表 没 有 检索 功能 ， 则 此 属性 无 效 。 
示例 代码 : 

<UL data-role="listview" data-filter="true" data-filter-theme="e"> 

设置 航 套 列表 表 尖 的 主题 样式 风格 ， 默 认为 b 风 格 。 

示例 代码 : 

<UL data-role="listview" data-filter="true" data-header-theme="e"> 
设置 为 插页 风格 。 

默认 为 false， 不 使 用 插页 风格 。 

设置 为 true， 使 用 插页 风格 样式 。 

示例 代码 : 
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( 续 ) 
属 性 含义 
人 设置 分 立 按钮 图 标 样式 。 经 过 设置 ， 分 立 图 标 按钮 在 没有 设置 图 标 样式 的 情况 下 ， 默 认 使 


用 被 设置 的 图 标 样 式 。 这 里 也 可 以 使 用 自 定义 图 标 样式 。 
默认 为 向 右 箭 头 arrow-T。 


示例 代码 : 
<ul data-role="listview" data-split-icon="plus"> 
data-split-theme 设置 分 立 按钮 的 列表 主题 样式 ， 默 认为 b。 
示例 代码 : 
<ul data-role="listview" data-split-theme="e"> 
data-theme 设置 列表 主题 样式 。 默 认 情 况 下 ， 主 题 样式 继承 上 一 级 容 副 的 主题 样式 。 
示例 代码 : 


<U] data-role="listview" data-theme="e"> 


9.15.2 ”选项 


在 jQuery Mobile 中 , 列表 的 选项 与 属性 的 功能 大 人 致 相当 。 选 项 通 第 在 JavaScript 中 的 初始 化 中 
用 到 ,例如 在 mobileinit 事 件 中 进行 选项 设 定 ， 则 可 以 对 相应 页 面 中 各 个 列表 视图 进行 统一 的 样 
式 和 行为 设 定 。 

由 于 列表 选项 与 属性 大 多 类 似 ， 就 不 对 类 似 的 内 容重 复 介 绍 了 。 表 9-2 是 列表 选项 与 属性 的 
对 有 照 表 。 


表 9-2 ”列表 选项 与 属性 的 对 照 表 


选 项 属 性 功 能 


countTheme data-count-theme 设置 气泡 提示 主题 风格 

dividerTheme data-dividetheme 设置 分 类 列表 中 分 类 栏目 的 显示 主题 风格 
filter data-filter 设置 是 否 显示 检索 工具 栏 
filterplaceholder data-filter-placeholder 设置 检索 工具 栏 的 背景 文字 

filterTheme data-filter-theme 设置 检索 工具 栏 的 主题 样式 

headerTheme data-header-theme 设置 朋 套 列表 表 尖 的 主题 样式 风格 

inset data-inset 设置 为 插页 风格 

splitIcon data-split-icon 设置 分 立 按钮 图 标 样式 


设 
splitTheme data-split-theme 设置 分 立 按钮 列表 主题 样式 
设置 列表 主题 样式 


theme data-theme 


在 jQuery Mobile 中 ， 有 两 个 选项 没有 对 应 的 属性 ， 具 体 如 下 所 示 。 
口 initSelector: 用 于 对 特定 CSS 选 择 需 指定 的 按钮 进行 美化 ， 其 默认 值 为 jJqmData(role= 
'listview' )。 开 发 者 可 以 设 定 特定 的 CSS 样 式 名 称 , 设 定之 后 , jQuery Mobile 将 会 对 其 进 
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行列 表 样 式 美 化 。 而 在 这 样 的 页 面 下 ，data-role="listview" 也 不 再 起 作用 。 
口 filterCallback: 用 以 设 定 回 调 清 数 来 增强 jQuery Mobile 检 索 列 表 的 实现 功能 。 


9.15.3 方法 和 事件 


列表 视图 提供 了 两 个 方法 来 获得 子 页 或 者 刷新 列表 视图 样式 ， 具 体 如 表 9-3 所 示 。 
表 9-3 ”列表 视图 的 方法 


方 ”法 功 能 
childpages 获得 藤 套 列表 子 页 的 对 象 
refresh 刷新 列表 视图 样式 


此 外 ， 需 要 说 明 的 是 ， 在 创建 列表 视图 时 ， 将 会 触发 create 事 件 。 


9.16 ”高 级 编程 拉 巧 


在 进行 列表 视图 开发 的 时 候 , 一 些 高 级 撤 巧 将 会 有 助 于 开发 用 户 体验 更 好 的 应 用 。 在 这 一 市 
中 ， 我 们 将 会 介绍 : 

口 移 除 列表 视图 各 个 条 目 之 间 分 阳线 的 方法 ; 

口 列表 视图 支持 触 控 操作 的 方法 ; 

口 动态 加 载 列表 视图 内 容 。 


9.16.1 移 除 各 列表 条 目 间 的 分 隔 线 


当 使 用 列表 或 者 插页 列表 方式 美化 表单 时 ,表单 元 素 之 间 总 有 一 个 分 隔 线 .而 在 通常 的 表单 9 
操作 中 ,这样 的 分 隔 线 并 不 美观 ， 如 图 9-23 左 图 所 示 。 一 种 解决 方法 是 通过 移 除 ui-body-c 样 式 来 
移 除 列表 视图 的 表格 线 ， 详 情 可 参见 代码 清单 9-20， 得 到 的 最 终 效 果 如 图 9-23 右 图 所 示 。 
代码 清单 9-20 ” 移 除 表单 中 ui-body-c 的 CSS 样 式 定 义 

<script type="text/javascript"> 


$(document).ready(function(e) { 
$( "#1istViewForm' ).children().removeClass('ui-body-c'); 


3 


</script> 

代码 清单 9-21 是 通过 列表 方式 美化 表单 的 HTML 代 码 片 段 。 注 意 ， 在 这 个 代码 片段 中 ， 我 们 
声明 了 列表 视图 的 DOM 容 妖 的 id 属 性 为 listViewForm， 而 相应 的 JavaScript 也 是 对 这 个 id 为 
1istViewForm 的 对 象 移 除 了 ui-body-c 的 CSS 定 义 。 


图 9-23” 左 图 为 通 弟 的 表单 ， 右 侧 为 去 除 分 割 线 的 美化 效果 


代码 清单 9-21 去 除 列 表 视 图 分 隔 线 的 表单 


<form> 
<U] data-role="listview" data-inset="true" id="]istViewForm"> 
<1i data-role="fieldcontain"> 
<label for="name"> 登 录 名 :</l1abel> 
<input type= text”name= name” id="name" value="" /> 
</1i> 
<1i data-role="fieldcontain"> 
<label for="name" > 密码:</1abel> 
<input type="Password" name="password" id="password" value= 
</1i> 
<1i data-role="fieldcontain"> 
<fieldset class="vui-grid-a"> 
<div class="vui-block-a"> 
<button type= Submit” data-theme="d"> 取 消 </button> 
</div> 
<div class="ui-block-b"> 
<button type="submit"” data-theme="a"> 提 交 </button> 
</div> 
</fieldset> 
</1i> 
《</ul> 
</form> 


/> 


与 之 前 “使 用 列表 美化 表单 样式 ” 略 有 区 别 ， 在 这 样 的 应 用 场景 中 必须 对 <ul> 容 右 设置 id， 


以 便 jQuery 选 择 需 去 除 相 应 的 CSS 样 式 。 
9.16.2 ”列表 视图 触 控 操作 


在 第 6 草 中 ， 我 们 介绍 了 对 页 面 进行 触 控 操作 的 实现 方法 。 在 列表 视图 中 ， 我 们 同样 可 以 通 
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过 对 列表 进行 触 控 操 作 以 实现 更 加 丰富 的 功能 。 对 于 很 多 使 用 列表 视图 的 场景 , 触 控 操作 将 会 使 
列表 视图 更 加 方便 。 例 如 ， 在 iPhone 手 机 中 ， 如 果 使 用 般 套 列表 进行 内 容 管 理 与 呈现 ,那么 从 下 
级 列表 返回 上 级 列表 会 很 难 操作 , 毕竟 iPhone 手机 没有 Android 那 样 的 返回 键 。 如 采 能 在 列表 视图 
中 文 持 触 控 操作 ， 就 可 以 通过 轻 扫 屏 禹 实现 从 下 级 列表 视图 返回 到 上 一 级 列表 视图 了 。 

在 图 9-24 中 ， 当 癌 左 轻 扫 列表 内 容 时 ， 则 显示 关于 对 话 框 。 而 点 击 列表 内 容 时 ， 则 会 跳 转 到 
相应 的 页 面 中 。 


有 价值 的 资源 列表 


jQuery Mobile 关于 本 程序 


图 灵 社 区 演示 列表 触 控 事 件 响 应 


CatchException.NET 


图 9-24 左 图 为 初始 的 界面 ， 回 左 轻 扫 后 显示 右 图 所 示 的 对 话 框 


实现 图 9-24 这 样 的 触 探 操作， 需要 将 触 控 事件 啊 应 函数 绑 定 在 相应 列表 项 上 。 代 人 码 清单 9-22 
是 触 控 事件 绑 定 的 JavaScript 代 码 斤 段 。 


代码 清单 9-22 ”基于 列表 视图 的 触 控 事 件 啊 应 


<script type="text/javascript"> 

$('#listitem jQueryMobile').live('swipeleft',function(){ 
$('#lnkDialog' ).click(); 
}); 


$('#listitem ituring').live('swipeleft',function( ){ 
$('#lnkDialog' ).click(); 

}); 
$('#1listitem CatchException').live('swipeleft',function(){ 


$('#lnkDialog' ).click(); 
}); 


</script> 
为 了 能 够 打开 多 页 模板 中 的 对 话 框 界面 ， 这 里 使 用 一 个 隐藏 的 超级 链接 以 帮助 实现 点 击 操 
作 ， 如 代码 清单 9-23 所 示 。 
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代码 清单 9-23 用 以 打开 对 话 框 的 隐藏 的 超级 链接 
<a id='lnkDialog' href="#about" data-rel="dialog" data-transition= “pop” style='display:none;'></a> 
如 果 跳 转 上 日 标 不 是 当前 HTML 文 件 中 的 某 个 页 面 而 是 一 个 外 部 网 页 ， 则 不 需要 使 用 这 个 技巧 。 
下 面 是 对 应 的 列表 部 分 的 代码 户 段 ， 当 特定 列表 项 被 回 左 扫 过 时 ,， 绑 定 其 上 的 触 控 事件 被 触 
发 ， 此 时 会 打开 对 话 框 页 面 : 


<ul data-ITole= ]istview > 
<1i id="listitem jQueryMobile"> 
<a href="http://jqvuerymobile.com" rel="external">jQuery Mobile</a> 
</1i> 
<1li id="listitem ituring"> 
<a href="http://www.ituring.com.cn” rel="external"> 图 只 社区 </a> 
</1i> 
<1i id="listitem CatchException"> 
«a href="http://catchexception.net" rel="external">CatchException.NET</a> 
</1i> 
</U]> 


9.16.3 动态 加 载 列 表 视 图 


由 于 列表 视图 中 列表 的 DOM 内 容 是 一 次 性 加 载 和 呈现 的 , 如 果 页 面 中 包含 比较 多 的 列表 项 ， 
则 下 载 和 加 载 速 度 都 会 比较 慢 , 此 时 建议 使 用 延迟 加 载 技 术 , 即 打开 界面 时 只 有 一 部 分 列表 内 容 
被 呈现 ， 随 着 页 面 癌 下 翻动 ， 后 终 的 内 容 被 继续 加 载 。 这 样 ， 将 一 次 加 载 所 有 内 容 变 为 每 次 加 载 
一 部 分 内 容 , 那么 每 次 的 加 载 和 显示 速度 就 会 更 快 。 另 一 个 好 处 在 于 ， 如 果 面 对 大 量 公 众 用 户 的 
使 用 场景 ,这 样 的 策略 也 可 以 减少 服务 器 的 压力 。 系 统 不 再 需要 一 次 性 将 所 有 数据 传递 给 移动 设 
备 ， 而 是 随 用 随 取 ， 用 户 需 要 浏览 多 少 内 容 ， 就 下 载 多 少 内 容 。 

这 个 功能 的 实现 主要 通过 以 下 两 个 部 分 : 

口 检测 页 面 是 否 滚动 到 底部 ， 如 果 是 ， 则 执行 延迟 加 载 ; 

口 通过 延迟 加 载 吨 数 将 后 续 列 表 的 内 容 加 载 到 列表 中 。 

还 要 注意 一 点 , 由 于 这 个 延迟 加 载 程序 通过 监测 页 面 是 否 滚 动 到 底部 而 触发 加 载 活动 , 所 以 
第 一 屏 的 列表 内 容 需 要 能 保证 排列 之 后 超过 一 屏 尺 寸 , 否则 无 法 执行 屏幕 滚动 操作 , 也 就 无 法 触 
发 延迟 加 载 操 作 。 在 实际 的 项 目 实践 中 ， 建 议 在 列表 下 方 增加 一 个 “加 载 更 多 ”按钮 ， 在 上 自动 加 
载 失 败 的 时 候 ， 使 用 者 可 以 手工 触发 这 个 按钮 实现 页 面 剩余 内 容 的 加 载 ， 例 如 微 博 或 Facebook 都 
有 类 似 的 设计 。 

代码 清单 9-24 用 于 检测 界面 是 否 滚动 到 屏幕 底部 ， 并 执行 加 载 活 动 的 代码 片段 。 


代码 清单 9-24 ”动态 加 载 HTML DOM 内 容 


<script type="text/javascript"> 
/* 检测 页 面 是 否 滚 动 到 最 低 部 */ 
$(window).scroll(function(){ 
if($(window).scrollTop()==$(document).height()-$(window).height()){ 
loadMore(); 
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} 
1 


/* 延迟 加 载 函 数 */ 
function loadMore( ){ 
var i=0; 
for(i=0; i<5; i++) 
{ 
/* 根据 业务 场景 的 不 同 而 定义 不 同 的 加 载 内 容 */ 
var ] = 0; 
var newListItem = document.createEtlement('1i'); 
newListItem.innerHTML = 'List Item ; 
$('#1istviewScrolling' ).append(newListItem); 


} 


$('#]listviewScrolling' ).listview('refresh'); 


} 


</script> 
上 面 这 个 程序 会 动态 创建 列表 项 内 容 并 将 其 添加 在 列表 最 后 。 这 个 示例 的 完整 代码 如 代码 清 
单 9-25 所 示 。 


代码 清单 9-25 ”动态 加 载 列 表 视 图 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
/* 检测 页 面 是 否 滚动 到 最 低 部 */ 
$(window).scroll(function( ){ 
if($(window).scrollTop()==$(document).height()-$(window).height()){ 
loadMore(); 


} 
}); 


/* 延迟 加 载 函 数 */ 
function loadMore( ){ 
var 1=0; 
for(i=0; i<5; i++) 
{ 
/* 根据 业务 场景 的 不 同 定义 不 同 的 加 载 内 容 */ 
var ] = 0; 
var newListItem = document.createElement("'1i'); 
newListItem.innerHTML = “List Item ; 
$('#1istviewScrolling' ).append(newListItem); 


} 


$('#listviewScrolling').listview('refresh'); 


<《/ScTIpt> 
</head> 
<body> 
<Section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 廷 迟 加 载 </h1> 
</header> 
<div class="content" data-role="content"> 
<ul data-role="listview" id="listviewScrolling"> 


<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 
<1i>List 


</U]> 


Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 
Item</1i> 


</div> 
</Sectiony> 
</body> 
</html> 


在 实际 应 用 场景 中 , 列表 内 容 可 能 需要 动态 取 目 服务 条, 所 以 一 个 完整 的 动态 列表 视图 加 载 
往往 是 浏览 介 和 服务 如 共 同 完成 的 。 

在 移动 设备 浏览 硕 每 次 执行 加 载 的 时 候 , 由 浏览 硕 以 Ajax 方式 回 服务 需 发 起 请 求 以 获得 后 续 
的 内 容 。 服 务 硕 将 生成 的 内 容 以 JSON 的 方式 传 回 浏览 硕 。 训 览 硕 中 的 JavaScript 在 接收 到 来 自 服 
务 需 的 内 容 之 后 ， 对 内 容 进行 解析 并 生成 合适 的 DOM 对 象 ， 然 后 将 新 的 列表 条 目 添 加 在 列表 视 
图 后 面 。 这 样 就 是 一 个 基本 的 服务 盖 与 鹿 览 如 共同 完成 的 动态 加 载 过 程 。 

由 于 这 里 主要 介绍 jQuery Mobile 移 动 应 用 开发 技术 , 所 以 Ajax 通信 以 及 服务 硕 处 理 相关 的 内 
容 就 不 获 述 本 。 


表单 是 HTML 中 最 常用 的 技术 之 一 , 通常 用 于 问 服 务 器 提交 输入 的 内 容 。 在 jQuery Mobile 中 ， 
表单 所 实现 的 功能 和 以 往 的 HTML 表 单 完 全 一 样 , 但 是 经 过 美化 的 界面 更 加 人 简洁， 实现 起 来 也 更 
加 简单 。 

在 这 一 章 中 ， 我 们 将 了 解 以 下 内 容 : 

口 表单 样式 ; 

口 输入 框 ; 

口 单 选 按钮 ; 

口 复 选 框 ; 

口 滑 块 ; 

口 开关 按钮 

口 选择 末 单 ; 

口 禁用 表单 元 系 ; 

口 隐藏 标签 ; 

口 Mini 尺 二 的 表单 样式 ; 

口 高 级 开发 技术 。 


10.1 表单 样式 


jQuery Mobile 表 单 与 其 他 HTML 表单 的 提交 方式 一 致 ， 也 是 通过 基于 <form> 标 签 的 post 或 者 
get 方 法 实现 的 。 提 区 表单 的 原型 化 代码 如 下 : 

<form id="FormID" name="FormName" method="post" action="index.php">...</form> 

默认 情况 下 ,表单 元 系 的 样式 将 会 继承 页 面 或 者 表 蛙 的 样式 。 通 常 ， 开发 者 不 知 要 专门 类 化 
表单 样式 ， 而 是 由 jQuery Mobile 自 动 完 成 。 图 10-1 是 一 个 登录 表单 ， 这 个 表单 中 的 各 个 元 素 经 过 
jQuery Mobile 美 化 之 后 ， 将 呈现 与 其 他 页 面 元 素 风 格 一 致 的 样式 ， 比 如 输入 框 和 按钮 等 。 
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图 10-1 登录 表单 
图 10-1 所 示 的 登录 表单 的 代码 如 代码 清单 10-1 所 示 。 


代码 清单 10-1 登录 表单 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css"” /> 
<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="MainPage” data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 


<h1> 登 录 </h1> 

</header> 

<div class="content" data-role="content"> 
<form> 


<div data-role="fieldcontain"> 
<input type="text” name="name”id="name” placeholder=" 登 录 名 " /> 
<input type="Password" name="password"” id="password” placeholder=" 密码"/> 
<div style="margin-top:20px;” > 
<fieldset class="ui-grid-a"> 
<div class= Ui-block-a > 
<button type= TeSset”data-theme= d > 取消 /button> 
</div> 
<div class= Ui-block-b > 
<button type="Ssubmit”data-theme="a" > 提交 </buttony> 
</div> 
</fieldset> 
</div> 
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</div> 
</form> 
</div> 
</section> 
</body> 
</html> 


如 果 和 希望 表单 以 原生 的 HTML 表 单 样式 呈现 , 需要 进行 一 些 额 外 的 设置 。 通过 修改 data-role 
属性 为 none, 表单 元 系 将 以 原生 表单 样式 而 非 移 动 应 用 风格 样式 呈现 。 例 如 , 在 代码 清单 10-1 中 ， 
在 文本 输入 框 的 相关 代码 中 加 入 data-role="none"， 那 么 文本 输入 框 就 以 原生 表单 样式 显示 ， 如 
图 10-2 所 示 。 


图 10-2 ”原生 表单 样式 


10.2 ”输入 框 
按照 功能 ， 输 入 框 被 细 分 为 如 下 14 种 ， 具 体 如 表 10-1 所 示 。 


表 10-1 输入 框 类 型 


类 型 名 称 
text 文本 输入 框 
password 密码 输入 框 
number 数字 输入 框 
email 电子 邮件 输入 框 
url URL 地 址 输入 框 


tel 电话 号 码 输 入 框 


( 续 ) 
类 型 名 称 
time 时 间 输 入 框 
data 日 期 输入 框 
month 月 份 输入 框 
week 周 输入 框 
datetime 时 间 日 期 输入 框 
datetime-local 本 地 时 间 日 期 输入 框 
color 色彩 输入 框 
search 查询 框 


每 种 输入 框 均 可 以 通过 这 样 的 形式 在 jQuery Mobile 中 使 用 : 
<input type="text" name="name" id="name" value=""/> 

例如 电话 号 人 码 输 入 框 在 jQuery Mobile 中 征 这 样 使 用 的 : 
<input type="tel" name="name" id="name" value=""/> 


各 个 输入 框 的 type 属 性 可 能 不 同 ， 但 是 它们 的 呈现 样式 是 一 致 的 。 


10.2.1 属性 与 选项 


是 与 选项 的 实现 功能 大 致 相同 , 重复 的 部 分 这 里 就 不 再 获 述 了 。 使 用 这 些 属性 和 
， 我 们 可 以 设 定 输 入 框 的 尺寸 、 靖 放 控 制 以 及 主题 风格 。 0 2 列 出 了 输入 框 的 属性 、 选 项 
ee 


表 10-2 输入 框 属性 与 选项 
选 项 属 性 功 能 
mini data-mini 设置 标准 尺寸 或 者 mini 尺 寸 ， 默 认 值 为 false 
preventFocusZoom data-prevent-focus-zoom 当 焦 点 位 于 输入 框 中 时 ,禁止 执行 缩放 操作 ,以 免 缩放 后 输入 困难 。 在 
iOS 平 台中 ， 默 认 值 为 true， 表 示 禁 止 缩放 
mate data-theme 设置 主题 风格 。 默 认为 空 ， 表 示 主 题 风格 继承 自 父 级 容器 


下 面 举例 说 明 如 何 通过 属性 和 选项 来 设置 输入 框 的 主题 风格 。 通 过 属性 设置 时 间 输 入 框 主题 
风格 的 代码 如 下 : 


<input type= time” id= myTimeInput ”data-theme= e /> 
通过 选项 设置 时 间 输 入 框 主题 风格 的 代码 如 下 : 
$('# myTimeInput).slider({ theme: "e” }); 


除了 表 10-2 提 到 的 3 个 选项 外 , 输入 框 还 有 一 个 , 那 就 是 initSelector 选 项 , 它 用 以 设 定 
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自 定 义 的 选择 器 。 如 果 设 定 了 initselector ， 那 么 只 有 选择 器 指定 的 输入 框 才 会 被 jQuery Mobile 
进行 样式 泻 染 和 通过 选项 、 属 性 、 方 法 等 进行 控制 。 
10.2.2 方法 与 事件 

在 文本 输入 框 中 , 主要 涉及 两 个 方法 , 分 别 是 enable() 和 disable(), 其 中 前 者 用 于 启用 一 个 
已 禁用 的 输入 框 ， 后 者 用 于 禁用 一 个 输入 框 。 下 面 这 行 代码 实现 了 对 某 个 输入 框 的 禁用 操作 : 


$('#myInput' ).textinput('disable'); 


输入 框 支持 创建 事件 。 在 创建 输入 框 时 ， 会 触发 create 事 件 。 


10.3 ” 单 选 按钮 


单 选 按钮 可 以 包含 奋 干 个 多 选 一 的 选项 , 使 用 者 每 次 只 能 选择 一 个 选项 。 被 选中 的 选项 将 会 
随 表单 而 一 同 被 提交 到 服务 器 。jQuery Mobile 的 单 选 按钮 样式 如 图 10-3 所 示 。 在 jQuery Mobile 中 ， 
没有 选中 的 单 选 按钮 是 灰色 的 ， 而 选中 的 单 选 按钮 则 会 高 亮 显 示 。 不 管 选中 或 者 没有 选中 , 按钮 
的 文字 都 不 会 发 生变 化 。 


单 选 按钮 : 
© C++ 
Pascal 
Visual C++ 
Delphi 


JavasScript 
图 10-3” 单 选 按钮 


在 移动 应 用 中 ， 为 方便 用 户 作 出 选择 ， 单 选 按 钮 通常 以 按钮 组 的 形式 呈现 。 要 实现 按钮 组 ， 
开发 者 需要 将 各 个 单 选 按钮 置 于 fieldset 容 希 中 ， 并 将 该 容 需 的 data-role 属 性 设置 为 
controlgroup。 通 和 常 ， 一 个 fieldset 只 作为 一 个 按钮 组 使 用 。 如 果 有 多 组 不 同 的 单 选 按 钮 ， 则 可 
以 在 不 同 的 fieldset 容 人 各 中 分 别 放 置 各 组 单 选 按钮 。 

代码 清单 10-2 是 图 10-3 所 示 页 面 的 代码 。 


代码 清单 10-2 单 选 按 钮 


<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup'"> 

<legend> 单 选 按钮 : </1legend> 
<input type="radio" name="radio-choice-1" value="choice-1" checked="checked"/> 
<label for="radio-choice-1">C++</1abel> 
<input type="radio" name="radio-choice-1" value="choice-2"/> 
<label for="radio-choice-2">Pascal</1label> 
<input type="radio" name="radio-choice-1" value="choice-3"/> 
<label for="radio-choice-3">Visual C++</l1abel> 
<input type="radio" name="radio-choice-1" value="choice-4"/> 


<label for="radio-choice-4">Delphi</label> 
<input type="radio" name="radio-choice-1" value="choice-5"/> 
<label for="radio-choice-5">JavaScript</label> 
</fieldset> 
</div> 


默认 情况 下 ， 单 选 按 钮 是 目 上 而 下 依次 排列 的 。 如 果 想 水 平 排列 单 选 按 钮 ， 则 需要 在 
<filedset> 容 需 中 声明 data-type 属 性 为 horizontal。 需 要 注意 的 是 ,水 平 排列 会 受 浏 览 需 分 辩 率 
的 影响 。 如 采 一 行文 学 较 多 ， 可 能 出 现 换 行 ， 从 而 影响 呈现 效 采 。 水 平 排列 的 单 选 按钮 的 代码 结 
构 如 代码 清单 10-3 所 示 。 


代码 清单 10-3 ”水 平 排列 的 单 选 按钮 


<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup" data-type="horizontal"> 
<legend> 水 平 单 选 按钮 : 《</1legend> 
<input type="radio" name="radio-choice-b" value="001" checked="checked" /> 
<label for="radio-choice-c">C++</1abel> 
<input type="radio" name="radio-choice-b" value="010" /> 
<label for="radio-choice-d">Pascal</1label> 
<input type="radio" name="radio-choice-b" value="100" /> 
<label for="radio-choice-e">Python</label> 
</fieldset> 
</div> 


运行 上 述 代码， 得 到 的 结果 如 图 10-4 所 示 。 


水 平 单 选 按钮 : 


Pascal Python 


图 10-4 水 平 排列 的 单 选 按钮 


在 开发 与 单 选 按钮 相关 的 功能 中 , 开发 者 可 以 通过 jQuery Mobile 所 提供 的 属性 与 选项 对 单 选 
按钮 的 尺寸 、 主 题 风 格 等 进行 设 定 ， 通 过 方法 和 事件 对 单 选 按钮 的 行为 进行 处 理 。 


10.3.1 属性 与 选项 


单 选 按钮 具有 两 个 选项 ， 分 别 用 于 设 定单 选 按钮 的 庆 二 和 主题 风格 。 表 10-3 列 出 了 单 选 按钮 
属性 、 选 项 及 其 功能 的 对 应 关系 。 


表 10-3 单 选 按 钮 的 属性 与 选项 


选 项 属 性 功 能 
mini data-mini 设置 标准 尺寸 ， 或 者 mini 尺 寸 ， 默 认为 false 
theme data-theme 设置 主题 风格 。 默 认为 空 ， 主 题 风 格 继承 目 父 级 容 需 


下 面 我 们 看 一 下 如 何 通过 属性 或 者 选项 来 实现 主题 风格 。 通 过 属性 设置 主题 风格 的 代码 如 下 : 


10.4 复 选 框 179 


<input type= Tadio”name= myRadio” id= myRadio” value="001" data-theme="e" /> 
通过 选项 设置 主题 风格 的 代码 如 下 : 


$('#myRadio' ).checkboxradio({ theme: 'e' }); 


10.3.2 方法 与 事件 


在 单 选 按钮 的 相关 操作 中 ， 主 要 涉及 3 个 方法 ,分 别 是 enable()、disable() 和 refresh(), 其 
作用 分 别 是 启用 已 禁用 的 单 选 按钮 ， 禁用 某 个 单 选 按 钮 ,刷新 单 选 按 钮 。 禁 用 单 选 按 钮 的 示例 代 
码 如 下 : 


$('#myRadio' ).checkboxradio(' disable'); 


单 选 按钮 文 持 创 建 事 件 。 在 创建 单 选 按钮 时 ， 会 触发 create 事 件 。 


10.4 ” 复 选 框 


复 选 框 允 许 用 户 一 次 性 选择 多 个 选项 ， 如 图 10-5 所 示 。 有 别 于 单 选 按钮 ， 复 选 框 可 以 支持 同 
时 选择 多 个 不 同 的 选项 。 被 选中 的 复 选 框 会 高 亮 显示 包含 有 对 钓 的 矩形 框 , 没有 选中 的 复 选 框 则 
会 呈现 为 灰色 的 矩形 框 。 


复 选 框 : 
C++ 
Pascal 
Visual Basic 


Java 
图 10-5” 复 选 框 


实现 图 10-5 所 示 的 复 选 框 的 功能 的 代码 如 代码 清单 10-4 所 示 。 同 单 选 按钮 一 样 ， 复 选 框 通常 
也 会 被 放置 在 fieldset 容 器 中 ， 并 且 该 容器 的 data-role 属 性 被 设置 为 controlgroup， 表 示 它 们 为 
一 组 相关 的 复 选 框 。 


<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup"> 

<legend> 复 选 框 : </legend> 
<input type=" checkbox" name="checkbox-1a" id="checkbox-1a"” /> 
<label for="checkbox-1a">C++</label> 
<input type="checkbox" name="checkbox-2a" id="checkbox-2a"” /> 
<label for="checkbox-2a">Pascal</1abel> 
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" c /> 
<label for= checkbox-3a >Visual Basic</label> 
<input type=" checkbox”name= "checkbox-4a”1id= checkbox-4a”/> 
<label for="checkbox-4a">Java</label> 


</fieldset> 
</div> 


如 采 单 独 来 看 单 选 按钮 或 者 复 选 枉 的 HTML 人 代码， 我 们 会 发 现 这样 的 代码 和 标准 的 HTML 
Form 人 代码 没有 任何 差别 。 而 它们 的 呈现 效果 的 确 是 jQuery Mobile 的 Web 移 动 应 用 的 风格 。 这 是 由 
于 默认 情 况 下 ， 所 有 页 面 中 的 单 选 按钮 或 复 选 全 都 会 被 jQuery Mobile 演 染 成 统一 的 风格 样式 。 

同 单 选 按钮 一 样 ,在 复 选 框 的 fieldset 容 本 中 声明 data-type 属 性 为 horizontal， 可 以 实现 复 
选 框 的 水 平 布局 。 需要 注意 的 是 , 水 平 排列 也 会 受到 浏览 融 分 辩 座 的 影响 ,文字 过 多 将 可 能 出 现 
折 行 ， 从 而 影响 最 终 呈现 效果 。 因 此 ， 开 发 者 需要 谨慎 选择 是 否 使 用 水 平 布局 呈现 复 选 框 。 

虽然 复 选 框 和 单 选 按钮 在 功能 和 样式 上 存在 诸多 不 同 , 但 是 各 个 属性 、 选 项 、 方 法 与 事件 的 
定义 是 完全 一 样 的 。 比 如 ， 下 面 的 代码 用 于 禁用 复 选 框 : 

$("'#myCheckbox' ).checkboxradio('disable'); 

与 单 选 按钮 非常 类 似 , 除了 jQuery 选择 融 所 指 癌 的 DOM 对 象 不 同 外 , 单 选 按钮 和 复 选 框 的 属 
性 、 选 项 、 方 法 和 属性 都 一 样 ， 所 以 在 此 不 再 歼 述 它们 了 。 如 采 需 要 ， 恋 者 可 以 参阅 单 选 按钮 的 
相关 内 容 。 


10.5 ” 滑 块 
一 般 情 况 下 ， 每 次 移动 清 块 ， 数 字 会 增加 1。 如 果 滑 块 数值 范围 很 大 ， 比 如 从 0 到 10000， 而 


移动 设备 的 屏幕 宽度 固定 ， 则 每 次 移动 滑 块 时 ， 数 字 增 长 可 能 比较 快 。jQuery Mobile 的 滑 块 样式 
如 图 10-6 所 示 。 


图 10-6 滑 块 


滑 块 可 以 设置 最 小 值 和 最 大 值 ， 以 约束 滑 块 的 数据 范围 。 在 清 块 对 象 中 ，min 属 性 用 于 设 定 
最 小 值 ，max 属 性 用 于 设 定 最 大 值 ，value 属 性 用 于 设 定 默 认 值 。 
图 10-6 所 示 的 滑 块 的 代码 如 代码 清单 10-5 所 示 。 


代码 清单 10-5 请 块 
<div data-role="fieldcontain"> 
<label for="slider"> 背 块 : </l1abel> 
<input type="range" name="slider" id="slider" value="0" min="0" max= 100” /> 
</div> 


注意 ” 滑 块 相关 的 属性 、 选 项 、 方 法 和 事件 与 开关 按钮 是 完全 相同 的 ， 它 们 的 唯一 区 别 是 用 户 
界面 呈现 样式 上 。 如 果 开 发 者 希望 了 解 开关 按钮 的 属性 、 选 项 、 方 法 和 事件 的 用 法 ， 请 
参阅 本 节 。 
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10.5.1 属性 与 选项 


在 太 寸 和 主题 风格 设 定 方面 ， 滑 块 的 属性 与 选项 所 实现 的 功能 大 致 关 似 。 表 10-4 列 出 了 滑 块 
属性 、 选 项 及 其 功能 的 对 应 关系 。 


表 10-4 ”请 块 属性 与 选项 


选 项 属 性 功 能 

mini data-mini 设置 标准 尺寸 或 者 mini 尺 寸 ， 默 认为 false 

theme data-theme 设置 主题 风格 。 默 认为 空 ， 主 题 风 格 继承 目 父 级 容 需 
trackTheme data-track-theme 设置 滑 块 轨 着 主题 风格 。 黑 认为 空 ， 继 限 上 自 父 级 容 需 


通过 属性 设置 滑 块 轨道 主题 风格 的 代码 如 下 : 

<input type= Tange” id= my9]ider” value="0" min="0" max="100" data-track-theme="e"/> 
通过 选项 设置 滑 块 轨道 主题 风格 的 代码 如 下 : 

$('#mySlider).slider({ trackTheme: "e"” }); 


此 外 ， 请 块 中 有 一 些 选 项 是 没有 对 应 属性 的 ， 如 表 10-5 所 示 。 


表 10-5 滑 块 选项 


选 项 功 能 
disable 设置 禁用 滑 块 ， 默 认 值 为 false， 表 示 不 禁用 
highlight 设置 高 亮 显 示 ， 默 认 值 为 false， 表 示 不 高 亮 显 示 
initSelector 目 定 义演 染 为 清 块 效果 的 选择 需 范 围 


如 果 需 要 通过 属性 禁用 滑 块 , 可 以 设置 滑 块 的 CSS 样 式 为 ui-disabled， 而 不 是 通过 设置 某 个 
寺 定 的 禁用 属性 以 实现 ， 相 关 代码 如 下 : 


<input type= Tange” id="mySlider" value="0" min="0" max="100" class="ui-disable"/> 


10.5.2 方法 与 事件 
在 滑 块 相关 的 操作 中 ， 主 要 涉及 启用 、 禁 用 和 刷新 功能 ， 相 关 方 法 及 作用 如 表 10-6 所 示 。 


表 10-6 滑 块 方法 


方 法 作 用 
enable 启用 滑 块 
disable 禁用 滑 块 
refresh 刷新 滑 块 样式 


以 茶 用 请 块 为 例 ， 下 面 这 段 代码 实现 了 对 某 个 滑 块 的 茶 用 操作 
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$('#mySlider').slider('disable'); 


在 jQuery Mobile 1.2.0 之 前 ， 滑 块 只 支持 create 事 件 ， 这 个 事件 在 滑 块 创建 时 触发 。 

从 jQuery Mobile 1.2.0 之 后 , 滑 块 增加 了 两 个 新 的 事件 一 一 sliderstart 和 sliderstop, 它们 分 
别 表 示 请 块 调整 开始 和 滑 块 调整 结束 。 

代码 清单 10-6 实 现 了 sliderstart 和 sliderstop 这 两 个 事件 。 当 开始 拖 动 请 块 时 ， 将 会 触发 
sliderstart 事 件 ， 并 提示 用 户 “开始 移动 请 块 ”。 当 请 块 移动 俘 止 时 ， 将 会 触发 sliderstop 事 件 ， 
并 提示 用 户 “ 请 块 移动 结束 "”。 执 行 效 末 如 网 10-7 所 示 。 


滑 块 移动 结束 


图 10-7 滑 块 移动 事件 


代码 清单 10-6 ”实现 sliderstart 和 sliderstop 这 两 个 事件 的 代码 


$(document).ready(function(e) { 
$('#slider').bind('slidestart' ,function(event) { 

alert(' 开 始 移 动 滑 块 ');) 

}); 


$('#slider').bind('slidestop' ,function(event) { 
alert(' 滑 块 移动 结束 '); 

}); 

}); 


10.6 ” 开 天 按 钮 


开关 按钮 的 界面 效果 如 图 10-8 所 示 ， 点 击 之 后 ， 即 可 切换 开关 值 ， 其 功能 类 似 于 单 选 按钮 或 
者 下 拉 菜 单 的 功能 。 从 用 户 体检 的 角度 来 说 ， 开 关 按钮 更 加 直观 。 


10.7 选择 菜 ; 183 


开关 按钮 : 
关 


图 10-8 ”开关 按钮 
实现 开关 按钮 的 代码 如 代码 清单 10-7 所 示 。 
代码 清单 10-7 ”开关 按钮 


<div data-role="fieldcontain"> 
<label] for="slider2"> 开 关 按 钮 : </1abel> 
<select name="slider2" id="slider2" data-role="slider"> 
<option value="off"> 关 </option> 
<option value="on"> 开 </option> 
<«/select> 
</div> 


从 开发 者 的 角度 来 说 ， 在 jQuery Mobile 中 ,开关 按钮 和 滑 块 在 属性 、 选 项 、 方 法 和 事件 等 方 
面 的 用 法 都 是 一 样 的 ， 这 里 就 不 再 歼 述 了 。 如 果 读 者 想 了 解 相关 信息 ， 可 以 参考 10.5 节 。 


10.7 ”选择 菜 4 


选择 沫 单 从 功能 上 更 接近 于 单 选 按钮 或 者 复 选 醋 ， 用 户 可 以 在 一 定 范 围 内 选择 特定 的 内 容 ， 
并 随 痢 表单 而 提交 它们 ， 如 图 10-9 所 示 。 与 单 选 按 钮 或 者 复 选 框 的 呈现 样式 不 同 ， 选择 采 单 并 不 
将 所 有 内 容 卫 接 呈 现在 浏览 带 上 ， 而 只 有 用 户 点 击 选择 末 单 时 ， 备 选 内 容 才 会 呈现 出 来 。 


注意 ”选择 菜单 通常 不 会 用 作 导 航 ， 如 果 需 要 实现 导航 菜单 的 功能 ， 可 以 使 用 弹出 页 面 中 的 弹 
出 菜单 来 实现 。 如 果 想 了 解 弹 出 菜单 的 相关 内 容 ， 可 参考 第 5 章 。 


PHP 


Python 


ME Ele 


C# 


图 10-9 选择 菜单 
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图 10-9 所 示 的 选择 菜单 的 代码 可 参见 代码 清单 10-8 所 示 。 
代码 清单 10-8 选择 菜单 


<div data-role="fieldcontain"> 
<label for="Sselect-choice-1”class="select"> 常 用 语言 : 《</l1abel> 
<Select name="select-choice-1" id=" select-choice-1 > 
<option value= PHP >PHP</optiony> 
<option value= Python >Python</optiony> 
<option value="VB">Visual Basic</option> 
<option value="CSharp">C#</option> 
</Select> 
</div> 


在 实现 选择 六 单 的 时 候 ， 通 常 包含 这 样 两 部 分 内 容 : 

口 作为 选择 及 单 容 右 的 select 容 妖 ; 

口 以 option DOM 对 象 表示 的 选择 来 单 的 荣 单 项 。 

在 选择 某 音 中, 如 采 包 含有 对 选择 荣 单 进行 说 明 的 标签 , 则 需要 在 标签 中 说 明 相 关 的 选择 来 
单 ， 例 如 《label for="select-choice-1" class="select">。 

如 有 末 需 要 答 用 原生 沫 单 风 格 , 可 以 将 data-native-menu 属 性 设置 为 false, 呈现 效果 如 图 10-10 
所 不。 


中 


洒 


选择 你 钟爱 的 语言 


Visual Basic 


C# 


图 10-10 ”禁用 data-native-menu 属 性 的 原生 风格 选择 菜单 


注意 菜单 的 原生 风格 和 其 他 表单 元 素 的 原生 风格 设置 是 不 同 的 ， 其 中 前 者 是 一 种 jQuery 
Mobile 的 用 户 界面 风格 , 后 者 则 是 HTML 表 单元 素 未 经 任何 修饰 的 风格 。 选择 菜单 的 原生 
风格 是 通过 设 定 data-native-menu 为 false 实 现 的 ， 而 其 他 表单 元 素 的 原生 风格 是 通过 设 

定 data-role 属 性 为 none 实 现 的 。 
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图 10-10 所 示 的 原生 风格 选择 菜单 的 实现 代码 如 代码 清单 10-9 所 示 。 
代码 清单 10-9 ”原生 风格 菜单 


<div data-role="fieldcontain"> 
<label] for="select-choice-a”class="select"> 列 表 菜 单 : </1abel> 
<«select name="select-choice-a" id="select-choice-a" data-native-menu="false"> 
<option> 选 择 你 钟爱 的 语言 /optiony> 
<option value="PHP">PHP</option> 
<option value= Python >Python</optiony> 
<option value="VB">Visual Basic</optiony> 
<option value="CSharp">C#</option> 
</select> 
</div> 


10.7.1 分 组 显示 菜单 项 


选择 菜单 中 的 内 容 可 以 分 组 显示 ， 示 例 图 如 图 10-11 所 示 。 经 过 分 组 之 后 ， 一 类 内 容 被 归纳 
在 一 起 , 这 样 有 助 于 用 户 在 不 同 分 组 中 进行 快速 选择 。 每 个 分 组 琳 单 的 标题 和 这 个 分 组 中 的 末 单 
项 存在 大 致 一 个 字符 的 缩 进 , 这 样 使 用 者 可 以 一 目 了 然 地 识别 出 菜单 的 不 同 分 组 。 如 有 果 分 组 之 后 
的 内 容 比 较 多 ， 用 户 也 可 以 通过 上 下 滑动 屏 大 来 看 到 更 多 有 亲 单 中 的 内 容 。 
为 了 有 助 于 使 用 者 方便 地 识别 出 分 组 ,不 同 分 组 的 内 容 会 缩 进 显示 。 例 如 在 图 10-11 中 ,“ 页 
面 开 发 ”这 组 内 容 包 含有 HTML、JavaScript 和 CSS 这 3 个 亲 单 项 ， 它 们 比 “ 页 面 开发 ”这 几 个 字 
问 右 缩 进 了 几 个 像素 。 


$ 


一 一 


页 面 开 发 【TS 一 


HTML 


JavaScript ASP.NET MVC 


CSS 


应 用 服务 器 开发 


ASP.NET MVC 


PHP 


图 10-11 左 图 为 分 组 显示 表单 内 容 ， 右 图 为 选择 某 个 菜单 项 后 的 效果 
要 实现 末 单 内 容 的 分 组 发 者 需要 将 各 个 分 组 沫 单项 依次 放置 在 optgroup 容 侣 中 ， 人 然后 再 


蓝 
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将 optgroup 按 顺序 放 在 select 容 硕 中 就 可 以 了 。optgourp 的 label 属 性 值 将 会 作为 分 组 名 称 显示 在 
来 单 分 组 的 列表 中 。 
图 10-11 所 示 的 分 组 的 实现 方式 如 代码 清单 10-10 所 示 。 


代码 清单 10-10 ”分 组 显示 菜单 内 容 


<div data-role="fieldcontain"> 
《Label for="select-choice-nc" class="select"> 常 用 技术 : </label> 
<select name="select-choice-8" id="select-choice-nc"> 
<optgroup label=" 页 面 开发 "> 
<option value="HTML">HTML</option> 
<option value="JavaScript">JavaScript</option> 
<option value="CSS">CSS</option> 
</optgroup> 


<optgroup label=" 应 用 服务 器 开发 "> 
<option value="ASP.NET MVC">ASP.NET MVC</option> 
<option value="PHP">PHP</option> 
<option value="JSP">JSP</option> 

</optgroup> 


<optgroup label=" 数 据 库 "> 
<option value="MySQOL">MySQL</option> 
<option Value= 90L Server">SQOL Server</option> 
<option value="SQLite">SQLitex</option> 
</optgroup> 


<optgroup label=" 操 作 系 统 "> 
<option value="Linux">Linux</option> 
<option value="Windows">Windows</option> 
<option value="Android">Android</option> 
</optgroup> 
</select> 
</div> 


10.7.2 ”垂直 分 组 与 水 平分 组 


如 果 选 择 菜单 中 的 几 项 具有 一 定 的 相关 性 ， 那 么 分 组 则 更 加 有 助 于 使 用 者 来 进行 选择 和 使 
用 。 通 销 ， 来 单 文字 较 多 时 选择 垂直 分 组 ， 文 字 较 少时 选择 水 平分 组 ,示例 岁 如 图 10-12 所 示 。 
不 过 即便 是 垂 百 分 组 , 文字 长 度 最 好 也 不 要 过 长 。 在 垂 百 分 组 中 ,， 沫 单 的 文字 最 好 不 要 超过 移动 
设备 浏览 副 屏 硕 的 览 度 。 

要 想 实 现 选 择 某 单 的 垂 二 分 组 ， 需 要 将 相关 选择 沫 单 包 含 在 fieldset 容 硕 中 ， 并 设置 
data-role 属 性 为 controlgroup。 图 10-12 所 示 的 垂下 分 组 的 实现 代码 如 代码 清单 10-11 所 示 。 


图 10-12 ”垂直 分 组 与 水 平分 组 


代码 清单 10-11 垂直 分 组 


<div data-role="fieldcontain"> 
<fieldset data-role="controlgroup'"> 
《Legend> 重 直 分 组 /Legend> 


<label for="verticallygrouped-year" > 年 </1abel> 

<select name="verticallygrouped-year" id="verticallygrouped-year'"> 
<option> 年 </option> 
<option value="2012">2012</option> 
<option value="2011">2011</option> 

</select> 


<label for="verticallygrouped-month"> 月 </1abel> 

<select name="verticallygrouped-month" id="verticallygrouped-month"> 
<option> 月 </option> 
<option Value= 01 >01</optiony> 
<option Value= 02 >02</optiony> 

</select> 


<label for="verticallygrouped-day" > 日 </label> 

<select name="verticallygrouped-day" id="verticallygrouped-day"> 
<option> 日 </option> 
<option Value= 01 >01</optiony> 
<option Value= 02 >02</optiony> 

</select> 

</fieldset > 
</div> 


默认 情况 下 ， 沫 单 分 组 为 垂 百 分组。 要 实现 水 平分 组 ， 只 需要 在 之 前 重生 分 组 的 基础 上 , 在 
fieldset 容 人 锅 中 设置 属性 data-type 为 horizontal 即 可 : 


<fieldset data-role="controlgroup" data-type="horizontal"> 
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水 平分 组 对 于 移动 设备 浏览 器 的 显示 宽度 有 一 定 要 求 ， 如 果 显 示 文 字 较 多 ,而 移动 设备 浏览 
器 的 宽度 较 窄 ， 则 可 能 会 影响 呈现 效果 。 


10.7.3 ”禁用 某 个 菜单 项 


在 某 种 场景 下 ,我们 可 能 需要 禁用 某 个 荣 单 项 ， 此 时 单独 设置 这 个 采 单 项 的 disabled 属 性 为 
disabled 即 可 。 
代码 清单 10-12 实 现 了 禁用 某 个 染 单 项 的 功能 ， 实 现 效 果 如 图 10-13 所 示 。 


代码 清单 10-12 ”禁用 某 个 菜单 项 


<div data-Tole= fieldcontain "> 
<label for="select-choice-1”class="select"> 常 用 语言 : 《</l1abel> 
<select name="select-choice-1" id="select-choice-1"> 
<option value="PHP">PHP</option> 
<option value= Python” disabled="disabled">Python</option> 
<option value="VB">Visual Basic</option> 
<option value="CSharp">C#</option> 
</Select> 
</div> 


在 代码 清单 10-12 中 , 由 于 Python 这 个 荣 单 项 被 设置 为 disabled， 所 以 沫 单项 呈现 为 灰色 和 不 
可 用 的 状态 ， 如 图 10-13 所 示 。 


WEE Te 


C# 


图 10-13 ”Python 菜单 项 被 禁 


10.7.4 多 选 菜单 


类 似 于 复 选 框 ， 选 择 末 蛙 也 文 持 多 选 的 功能 ， 不 例 图 如 图 10-14 所 示 。 当 打开 多 选 末 单 时 ， 
用 户 可 以 在 采 单 列表 的 右 侧 选择 多 个 六 单项 。 选择 完成 后 , 这 些 选 中 的 内 容 将 会 呈现 在 选择 荣 单 
上 ， 而 此 时 多 选 业 蛙 的 右 侧 将 呈现 一 个 气泡 提示 ， 告 诉 使 用 者 选择 的 菜单 项 的 数量 。 


HTML 


HTML, JavaScript, CSS 3) (9 


JavaScript 


ASP.NET MVC 
PHP 


JSP 


MySQL 


SQL Server 


图 10-14 左 侧 为 多 选 菜单 ， 右 侧 为 多 选 菜单 的 选择 结 宋 


要 实现 多 选集 单 ， 需 要 在 DOM 元 系 <select> 中 包含 如 下 两 个 属性 设置 。 

口 将 multiple 属 性 设置 为 nultiple ( 即 multiple="multiple" )， 用 以 标记 选择 菜单 支持 多 选 。 

口 将 data-native-menu 属 性 设置 为 false。 如 果 不 进行 这 样 的 设置 ， 则 无 法 在 移动 设备 中 从 
选择 沫 单 返回 之 前 的 表单 界面 。 设 置 这 个 属性 之 后 ， 将 可 以 在 选择 表单 的 头 部 添加 一 个 
Delete 图 标 按钮 ， 点 击 这 个 按钮 将 可 以 实现 选项 确认 。 

图 10-14 所 示 的 多 选 菜单 的 实现 代码 如 代码 清单 10-13 所 示 。 


代码 清单 10-13 ”多 选 菜 单 


<djiv data-role="fieldcontain"> 
<label for="select-choice-nc”class="select"> 常 用 技术 : </l1abel> 
《Select name="select-choice-1" id="select-choice-nc" 
multiple="multiple" data-native-menu= false > 
<optgroup label=" 页 面 开 发 "> 
<option value="HTML">HTML</option> 
<option value="JavaScript">JavaScript</option> 
<option value="CSS">CSS</option> 
</optgroup> 


<optgroup label=" 应 用 服务 器 开发 "> 
<option value="ASP.NET MVC >ASP.NET MVC</option> 
<option value="PHP">PHP</option> 
<option value="JSP">JSP</option> 

</optgroup> 


<optgroup label=" 数 据 库 "> 
<option value="MySQOL">MySQL</option> 
<option value="SQL Server">SOL Server</option> 
<option value="SQLite">SQLitex</option> 


</optgroup> 


<optgroup label=" 操 作 系 统 "> 
<option value="Linux">Linux</option> 
<option value="Windows">Windows</option> 
<option value="Android">Android</option> 
</optgroup> 
</select> 
</div> 


10.7.5 属性 与 选项 


开发 者 可 以 使 用 选择 菜单 的 属性 和 选项 设 定 选 择 菜 单 的 外 形 、 图 标 和 主题 风格 等 样式 , 具体 
如 表 10-7 所 示 。 


表 10-7 ”选择 菜单 的 属性 与 选项 对 照 表 


选 项 属 性 功 能 

commers data-corners 设置 选择 末 单 按钮 是 否 为 圆 角 和 矩形。 默认 为 true， 为 圆 角 矩形。 如 果 设 
置 为 false， 则 为 直角 和 矩形 

icon data-icon 设置 选择 琳 单 按钮 的 图 标 样式 ， 默 认为 向 下 按钮 arrow-d 

iconpos data-iconpos 设置 选择 沫 单 按钮 的 图 标 位 置 ， 殉 认为 右 侧 right 

iconshadow data-iconshadow 设置 按钮 阴影 ， 默 认为 显示 阴影 true。 如 果 设 置 为 false， 则 不 显示 阴影 

inline data-inline 设置 是 否 以 内 联 方 式 显 示 选 择 亲 单 按钮 。 默 认为 null， 不 以 内 联 方式 显 
示 ， 也 可 以 设置 为 false 表 示 这 个 含义 。 设置 为 true， 表示 以 内 联 方 式 显 
不 

mini data-mini 设置 标准 尺寸 或 者 mini 人 尺寸。 默认 为 false， 表 示 以 标准 尺寸 显示 

nativemenu data-native-menu 设置 是 否 以 原生 样式 显示 菜单 。 默 认为 true， 以 原生 样式 显示 菜单 。 设 


置 为 false 时 ,表示 不 以 原生 样式 显示 菜单 ,此 时 可 能 导致 显示 速度 变 慢 。 
但 是 在 多 选 菜单 中 ， 必 须 将 此 选项 设置 为 false 才 可 以 正常 工作 

preventFocusZoom ”data-prevent-focus-zoom 当 焦 点 位 于 输入 框 中 时 ,禁止 执行 缩放 操作 ， 以 免 缩放 后 输入 困难 。 在 
iOS 平 台中 ， 默 认为 true， 表 示 禁 止 缩 放 


shadow data-shadow 设置 选择 菜单 按钮 的 阴影 效果 。 默 认为 true， 表 示 显 示 阴 影 效果 。 设 置 
为 false 时 ， 表 示 不 显示 阴影 效果 
theme data-theme 设置 主题 风格 。 默 认为 空 ， 主 题 风 格 继承 自 父 级 容 需 


下 面 这 行 代码 表示 选择 沫 单 不 使 用 原生 沫 单 样式 .直角 和 矩 形 按钮 ,按钮 中 的 图 标 为 星 型 网 标 : 
<select id= selectMenu ”data-native-menu= false” data-corners="false" data-icon="start"> 
通过 选项 设置 选择 沫 单 按钮 样式 的 代码 如 下 : 
$('# mySelectMenu) .Selectmenu({ icon: "start"” }); 

此 外 ， 还 有 两 个 特别 的 菜单 选项 ， 具 体 如 下 所 示 。 
口 initSelector 选 项 : 用 以 设置 自 定 义 的 选择 絮 。 当 使 用 initSelector 设 定 选 择 右 后 , jQuery 
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Mobile 就 会 在 执行 初始 化 的 时 候 ， 将 这 些 选 择 右 所 对 应 的 DOM 对 稼 初始 化 为 选择 采 单 。 
一 旦 设 定 了 选择 各 ，jQuery Mobile 默 认 的 选择 采 单 标签 就 可 能 不 再 起 作用 了 。 

口 overlayTheme 选 项 ， 用 于 设 定 基于 对 话 框 的 选择 采 单 的 禾 盖 层 的 主题 风格 。 


10.7.6 方法 与 事件 


在 选择 采 单 相关 的 操作 中 ， 主 要 涉及 启用 、 禁 用 、 刷 新 、 打 开 和 关闭 等 功能 ， 相 应 的 方法 如 
表 10-8 所 示 。 


表 10-8 选择 菜单 相关 的 方法 
方 ”法 功 能 
enable 启用 选择 菜单 
disable 禁用 选择 荣 单 
refresh 刷新 菜单 样式 
打开 选择 菜单 
close 关闭 选择 亲 单 
以 禁用 选择 亲 单 为 例 ， 下 面 这 段 代码 实现 了 对 某 个 选择 采 单 的 禁用 操作 : 


$('#mySelectMenu' ).selectmenu('disable'); 


选择 某 单 文 持 create 事 件 ， 该 事件 在 创建 选择 沫 单 时 触发 。 


10.8 ”禁用 表单 元 素 


如 果 要 禁用 某 个 表单 元 素 ， 则 可 以 通过 设置 CSS 为 ui-disabled 来 实现 ， 示 例 图 如 图 10-15 所 
示 。 在 图 10-15 中 ， 文 本 输入 框 和 查询 输入 框 被 标记 为 us-disabled， 所 以 它们 呈现 为 灰色 ， 无 法 
输入 或 使 用 。 表 单元 素 被 禁用 之 后 ， 基 于 其 之 上 的 输入 、 事 件 、 方 法 等 操作 都 将 被 一 同 禁用 掉 。 
该 操作 的 代码 原型 如 下 : 

<div data-role="fieldcontain" class="vui-disabled"> 


图 10-15 所 示 的 禁用 表单 元 素 的 实现 代码 如 代码 清单 10-14 所 示 。 
代码 清单 10-14 ”禁用 表单 元 素 


<div data-role="fieldcontain"> 

<label for="name"> 文 本 输入 框 : </1abel> 

<input type= text” name= name” id="name" value="" 
</div> 


" class="ui-disabled"/> 


<div data-role="fieldcontain" class="vui-disabled"> 

<label for="search"> 查 询 输 入 框 : </1label> 

<input type="search" name="search" id="search" value=""/> 
</div> 


表单 元 素 禁 用 


图 10-15 ”表单 元 系 被 禁用 


仔细 看 图 10-15 中 两 个 输入 框 的 界面 ， 可 以 发 现 它 们 略 有 差别 : 第 一 个 输入 框 的 文本 不 是 灰 
色 的 ， 而 第 二 个 文本 和 输入 框 都 是 灰色 的 。 这 是 由 于 第 一 个 文本 输入 框 的 元 系 被 禁用 ， 而 标签 元 
系 并 没有 人 被 设置 为 ui-disabled 样 式 ， 所 以 在 第 一 个 输入 框 中 ， 只 有 文本 输入 框 被 禁用 。 

在 第 二 个 查询 输入 框 的 代码 中 ， 由 于 禁用 样式 ui-disabled 被 应 用 于 fieldcontain 容 疑 上。 这 
个 容 磊 包含 有 标签 和 查询 输入 框 两 个 部 分 ， 所 有 包含 在 这 个 fieldcontain 容 右 中 的 表单 i 
被 禁用 的 状态 。 所 以 , 在 这 个 查询 输入 框 的 实现 效果 中 ,查询 输入 框 的 文本 以 及 输入 框 都 被 禁用 
而 呈现 为 灰色 。 


10.9 ”隐藏 标签 


在 很 多 应 用 场景 中 , 移动 应 用 界面 的 尺寸 比较 有 限 , 这 时 候 就 需要 尽量 有 效 地 利用 移动 设备 
浏 览 硕 的 界面 空间 。jQuery Mobile 提 供 了 一 种 隐藏 标签 的 技巧 ,在 这 种 实现 中 ,标签 不 被 独立 显 
示 ， 而 是 在 输入 框 中 显示 。 

要 实现 隐藏 标签 ， 大 致 需要 如 下 两 步 。 

(1) 在 需要 隐藏 标签 的 <div data-role="filedcontain"> 容 器 中 加 入 class="ui-hide-1label" 标 记 。 

(2) 在 输入 框 中 添加 placeholder 属 性 ， 并 将 标签 的 内 容 赋值 给 该 属性 


注意 ”placeholder 不 是 jQuery Mobile 新 增加 的 属性 ， 而 是 HTML5 在 表单 功能 上 支持 的 新 特性 。 
如 果 开 发 者 感 兴趣 ， 可 以 参考 HTML5 手 册 。 


图 10-16 是 支持 表单 元 条 隐藏 标签 和 没有 隐藏 标签 的 效 来 对 比 。 
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表单 元 素 隐 藏 


包含 ui-hide-label 定义 


没有 包含 ui-hide-label 定义 


文本 输入 框 : 


图 10-16 ”表单 元 系 隐 藏 标签 
图 10-16 所 示 的 页 面 的 实现 代码 如 代码 清单 10-15 所 示 。 


代码 清单 10-15 ”隐藏 标签 


《p> 包含 ui-hide-label 定义 </py> 
<div data-role="fieldcontain" class="ui-hide-label"> 

<label for="name"> 文 本 输入 框 : </1abel> 

<input type="text"” name="name” id="name”value="”placeholder=" 文 本 输入 框 "/> 
</div> 


<div data-role="fieldcontain" class= Ui-hide-]Jabel > 

《Label for="search"> 查 询 输 入 框 : 《/]abel1> 

<input type="search" name="search"” id="search"” value=""” placeholdeTr= "查询 输入 框 "/> 
</div> 


<hr/> 


<p> 没 有 包含 ui-hide-label 定 义 </p> 
<div data-role="fieldcontain"> 

<label for="name"> 文 本 输入 框 : </1abel> 

<input type="text"” name="name” id="name ”value="”placeholder=" 文 本 输入 框 "/> 
</div> 


<div data-role="fieldcontain"> 

<label for="search"> 查 询 输 入 框 : </1label> 

<input type="search" name="search"” id="search"” value=""” placeholder=" 查 克 输 入 框 "/> 
</div> 


10.10 ”mini 尺寸 的 表单 样式 
在 一 些 移动 应 用 开发 场景 中 , 例如 折 羞 内容 块 、 工 具 栏 或 列表 视图 中 ， 如 果 使 用 正常 尺寸 布 
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置 表单 元 素 , 会 变 得 拥挤 和 局 促 ， 此 时 如 果 能 将 小 一 号 的 表单 元 素 放 入 折 钱 内 容 块 、 工 具 栏 或 者 
列表 视图 中 , 用户 界 面 的 呈现 效果 将 会 更 加 舒适 。jQuery Mobile 提 供 了 一 套 小 尺寸 的 表单 元 系 用 
于 这 种 场景 ， 它 就 是 mini 尺 寸 的 表单 样式 。 


注意 ”在 jQuery Mobile 1.1.1 及 其 之 前 的 版 本 中 ， 工 具 栏 按钮 默认 为 正常 尺寸 。 自 jQuery Mobile 
1.2.0 之 后 ， 工 具 栏 按钮 将 默认 为 mini 尺 寸 。 要 实现 mini 尺 寸 的 表单 元 素 ， 可 以 在 表单 元 素 
中 设置 data-mini 属 性 为 true。 


图 10-17 是 一 张 对 比 图 ， 显 示 了 正 篆 尺寸 表单 元 系 和 mini 尺 寸 表单 元 系 的 不 同 。 图 10-17 右 图 
所 示 的 mini 尺 寸 的 登录 表单 的 实现 代码 如 代码 清单 10-16 所 示 。 


图 10-17 左 图 为 正常 尺寸 ， 右 图 有 mini 尺 寸 的 登录 输入 框 


代码 清单 10-16 ” mini 尺寸 表 单元 寻 


<div data-role="fieldcontain"> 
<input type="text” id="name” value="” placeholder=" 登 录 名 " data-mini="true"/> 
<input type="Password"” id="password"” value="” placeholder= 密码 ”data-mini= true /> 
<div style="margin-top:20px;” > 
<fieldset class="ui-grid-a"> 
<div class="vui-block-a"> 
<button type="reset"” data-theme="d"> 取 消 </button> 
</div> 
<div class="vui-block-b"> 
<button type="submit"” data-theme="a"> 提 交 </button> 
</div> 
</fieldset> 
</div> 
</div> 
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10.11 融 级 开发 技术 


Web 移 动 应 用 和 面 问 梨 面 浏览 硕 的 Web 蝎 面 应 用 都 会 经 名 用 到 表单 技术 ， 在 本 站 中， 我 们 将 
介绍 两 个 表单 提交 的 应 用 场景 一 一 表单 验证 和 文件 上 传 。 在 表单 验证 中 , 用户 在 提交 内 容 时 ,将 
会 首先 进行 内 容 验证 。 只 有 当 内 容 验 证 通过 后 ， 才 会 将 表单 内 容 提 交 到 服务 厅 。 在 文件 上 传 中 ， 
将 会 介绍 如 何在 jQuery Mobile 环 境 中 实现 移动 设备 文件 回 服 务 春 的 上 传 , 例如 上 传 一 张 照片 或 者 
视频 到 服务 化。 


10.11.1 表单 验证 


在 基于 jQuery 开发 的 应 用 中 ，jQuery Validation 是 一 种 广泛 用 于 表单 验证 的 插件 。 开 发 者 可 以 
定制 验证 规则 , jQuery Validation 将 会 验证 所 提交 的 表单 内 容 是 否 符合 规则 要 求 。 如 果 符合 规则 要 
求 ， 则 可 以 提交 到 服务 硕 ， 否 则 将 会 提示 用 户 进行 表单 内 容 的 修正 。 

在 开发 jQuery Mobile 移 动 应 用 时 , 我 们 也 可 以 通过 jQuery Validation 插 件 实 现 表 单 验证 ， 如 图 
10-18 所 示 。 在 这 个 应 用 场景 中 ， 只 有 输入 的 登录 内 容 符合 一 定 规则 (比如 登录 名 和 密码 都 不 能 
为 空 )， 登 录 表 单 的 内 容 才 会 被 提交 到 服务 硕 。 


图 10-18 ”表单 验证 
在 jQuery Mobile 应 用 开发 中 , 要 使 用 jQuery validation 插件 实现 表单 内 容 验证 ,大 致 需要 经 过 


这 样 几 个 步 又 。 
(在 页 面 中 除了 引用 jQuery 和 jQuery Mobile JavaScript 库 之 外 ， 还 需要 引用 jQuery Validate 搬 
件 。 这 里 我 们 使 用 的 验证 插件 代码 下 载 晶 http:/bassistance.de/jquery-plugins/jquery-plugin-validation/。 
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(2) 在 需要 进行 验证 的 表单 元 素 中 通过 class 设 置 规则 。 例 如 ， 内 容 不 得 为 空 ， 则 设置 class 
为 Tequired。 

(3) 在 JavaScript 中 设置 所 要 验证 的 表单 内 容 并 对 错误 提示 进行 样式 定义 。 

代码 清单 10-17 是 表单 验证 的 JavaScript 实 现 与 错误 文字 的 样式 定义 。 


代码 清单 10-17 表单 验证 


<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
«script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvery.validate.]js"></script> 
<script src="../jJs/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(e) { 
$( "#formLogin" ).validate({ 
submitHandler: function( form ) {} 
}); 
}); 


</script> 
<style type="text/css"> 
label.error { 
color: red; 
font-size: 16px; 
font-weight: normal; 
line-height: 1.4; 
margin: 0.5em Oem 1em Oem; 
width: 100%; 
float: none; 
display: block; 
} 
</style> 
在 这 段 代 码 中 ， 需 要 被 验证 的 表单 DOM 对 象 id 为 formLogin， 验 证 插件 也 是 绑 定 在 这 个 表单 
对 象 上 。 在 呈现 错误 消息 的 时 候 ，1abel.error 对 错误 消息 进行 了 定义 。 


代码 清单 10-18 是 对 输入 内 容 进 行 验证 的 表单 元 素 代 码 。 
代码 清单 10-18 “定义 表单 验证 


<input type= text ”name= name "class= Tequired ”placeholder= 登录 名 ”/> 
<input type= Password ”name= pasSsword ”class= Tequired ”placeholder= 密码 /> 


不 同 移动 设备 的 分 辨 率 相差 很 大 , 例如 智能 手机 和 高 分 辨 率 屏 幕 的 平板 电脑 分 辨 率 相 差 会 
Re ein 
在 手机 中 可 以 在 独立 一 行 中 显示 错误 信息 , 而 在 平板 电脑 中 则 可 能 将 输入 框 和 错误 提示 信息 放 在 
同一 行 显示 。 


10.11.2 文件 上 传 


jQuery Mobile 应 用 可 以 实现 基于 表单 的 文件 上 传 操 作 。 但 是 与 保 面 浏览 如 实 现 文件 上 传 有 所 
不 同 。 
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由 于 jQuery Mobile 默 认 通 过 Ajax 方式 实现 页 面 加 载 ， 而 文件 上 传 则 需要 将 内 容 提 区 到 服务 硕 
上 。 所 以 需要 在 表单 中 设置 data-ajax 为 false， 禁 用 ajax 方式 进行 表单 提交 。 同 茧 面 浏览 大 内 容 
上 上传 一 样 ， 也 需要 设置 内 容 上 传 的 编码 方式 enctype 为 multipart/form-data。 

在 进行 内 容 选 择 的 时 候 , 受到 操作 系统 安全 性 限制 , 并 不 是 任何 文件 都 可 能 会 被 选中 并 上 传 ， 
只 有 特定 的 用 户 文 件 才 可 能 被 选中 上 传 。 

在 图 10-19 中 ， 点 击 左 图 的 “Choose file” 按 钮 选择 文件 ， 并 点 击 提交 按钮 ， 可 以 将 选择 的 文 
件 提 交 到 服务 硕 上 。 图 10-19 的 右 图 是 可 以 选择 上 传 文件 的 范围 ， 包 括 照 相机 ， 有 录音， 相册 等 。 


Choose file 


No file chosen 


Camera 


Camcorder 


Sound Recorder 


Gallery 


Select music track 


图 10-19” 左 图 为 jQuery Mobile 的 内 容 上 传 界 面 ， 右 图 为 浏览 器 内 容 浏 览 与 选择 界面 
实现 文件 上 传 如 代码 清单 10-19 所 示 ， 所 实现 的 文件 上 传 界面 效果 ， 参 见 图 10-19 所 示 。 
代码 清单 10-19 文件 上 传 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="MainPpage”data-role="page”data-title=" 列 表 视 图 演示 "> 
<header data-role="header"> 
<h1> 内 容 上 传 </h1> 
</header> 


<div class="content" data-role="content"> 


<form action= "upload file.do" method="post" data-ajax="false" 
enctype="multipart/form-data"> 
<label] for="file"> 文 件 名 :</l1abel> 
<input type= file” name= file” id="file" /> 
<br /> 
<input type=" Submit”name=" Submit”Vvalue= "提交 ”/> 

</form> 

</div> 
</section> 
</body> 
</html> 


对 于 不 同 的 移动 设备 ， 其 分 辨认 不 同 , 屏 锻 方 加 也 不 同 ,， 这 些 都 需要 移动 应 用 提供 不 同 的 页 
面 布局 文 持 ,缺少 针对 不 同 屏 茶 分 辨认 的 设计 ,移动 应 用 的 页 面 元 系 在 一 些 设备 上 会 拥挤 在 一 起 ， 
而 在 另 一 些 设备 中 则 可 能 会 松 松 垮 垮 。jQuery Mobile 基 于 HTML5 提 供 了 多 种 不 同 的 页 面 布局 与 
呈现 技术 来 帮助 开发 者 快速 开发 出 针对 不 同 移动 设备 的 应 用 来 。 

在 这 一 草 中 ， 我 们 将 了 解 以 下 内 容 : 

口 适应 不 同 的 分 辩 率 ; 

口 改变 屏 龙 方 问 ; 

口 分 栏 布局 ; 

口 可 折 炙 内 容 块 ; 

口 折 车 组 。 


11.1 ”适应 不 同 的 分 辨 率 


不 同 的 移动 设备 具有 不 同 的 屏幕 尺寸 和 分 辩 率 ， 这 为 移动 应 用 开发 带 来 一 系列 挑战 。 例 如 ， 
当 加 载 某 个 应 用 的 背景 图 片 或 进行 界面 布局 时 , 不 同 分 辩 率 所 适合 的 背景 图 片 或 者 页 面 布局 方式 
也 会 不 同 ,将 尺寸 过 小 的 图 片 应 用 到 高 分 辩 率 的 移动 设备 时 ,使 用 者 会 感到 图 片 粗糙 而 不 够 精细 ; 
将 尺寸 过 大 的 背景 图 片 应 用 到 低 分 辩 率 、 小 尺寸 的 屏幕 时 , 使 用 者 需要 等 待 更 长 的 时 间 才 可 以 加 
载 完 这 张 图片 。 这 一 系列 问题 都 是 移动 应 用 开发 者 所 需要 考虑 的 。 
此 外 ， 一 些 移动 设备 支持 水 平方 向 (landscape ) 或 者 坚 直方 向 (portrait ) 的 显示 ， 并 且 当 屏 
幕 发 生 旋 转 时 浏览 器 也 会 进行 相应 的 旋转 。 在 不 同 的 显示 方向 下 , 也 需要 移动 应 用 能 够 支持 不 同 
的 显示 样式 ， 例 如 文字 列表 或 者 表单 的 样式 。 面 对 不 同 的 移动 设备 分 辨 率 和 使 用 场景 ， 开 发 者 可 [ 
以 通过 采用 CSS 的 媒体 查询 技术 来 定义 移动 应 用 的 布局 、 图 片 和 样式 。 


11.1.1 视 口 


视 口 〈viewport ) 是 计算 机 图 形 学 中 的 一 个 重要 概念 ， 表 示 浏 览 器 画布 中 可 见 的 矩形 区 域 。 
在 jQuery Mobile 中 ， 视 口 就 是 移动 设备 浏览 右 在 屏幕 中 呈现 的 部 分 。 需 要 注意 的 是 ， 在 用 jQuery 
Mobile 开 发 移动 应 用 时 ， 必 须 设置 视 口 ， 否 则 所 有 页 面 内 容 将 会 挤 在 一 起 而 无 法 正常 浏览 。 
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注意 ”在 HTML 的 meta 标 签 中 ，Vviewport 就 是 指 浏 览 器 所 能 显示 的 区 域 ， 在 一 些 资料 中 称 为 可 视 
窗口 (Visual viewport )。 本 章 中 使 用 的 视 口 均 是 指 可 视窗 口 。 
在 一 些 网 页 开发 资料 中 ， 视 口 的 概念 是 整个 网 页 的 可 视 化 区 域 ， 不 但 包括 浏览 器 显示 的 
部 分 ， 也 包括 超出 浏览 器 的 部 分 ， 这 样 的 视 口 称 为 布局 窗口 〈layout viewport )。 


见 ， 有 FE 


在 图 11-1 中 ， 我 们 标记 出 的 矩形 范围 就 是 视 口 的 作用 范围 。 


图 11-1 口 的 作用 范围 


作为 HTML 的 meta 元 素 ，viewport 用 于 设 定 浏览 句 屏 有 磊 的 宽度 以 及 初始 的 显示 缩放 比例 。 在 
本 书 的 示例 代码 中 ，viewport 通 稼 被 声明 为 : 


<meta name="viewport" content="width=device-width, initial-scale=1"> 

其 会 义 为 ， 宽 度 为 设备 宽度 ， 初 始 化 放 比例 为 100%。 

在 很 多 场景 下 ， 如 末 不 希望 用 户 对 页 面 进行 手工 红 放 ， 开 发 者 可 以 声明 user-scalable=no。 
第 见 的 viewport 参 数 及 其 含义 如 表 11-1 所 示 。 


表 11-1 viewport 参 数 及 其 含 》 


属 性 含义 
width 设置 视 口 的 宽度 ， 其 语法 为 width = device-width 或 者 width = no 


前 者 表示 视 口 的 宽度 为 移动 设备 浏览 絮 显 示 区 域 的 宽度 。 
后 者 表示 显示 宽度 为 某 个 设 定 的 像素 值 ， 该 像素 值 的 范围 为 200 到 10000， 殉 认 值 为 980 像 素 


height 设置 视 口 的 高 度 ， 其 语法 为 height = device-height 或 者 height = n。 


前 者 表示 视 口 的 高 度 为 移动 设备 浏览 大 显 示 区 域 的 高 度 。 
后 者 表示 显示 高 度 为 某 个 设 定 的 像素 值 ， 该 像素 值 的 范围 为 223~10000 
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属 性 含义 
minimum-scale 设置 视 口 被 缩放 的 最 小 尺寸 。 
所 设置 的 数值 为 浮 点 型 数字 ， 最 小 值 为 0.0， 最 大 值 为 10.0， 默 认 值 为 minimum-scale = 0.25。 
设置 视 口 被 缩放 的 最 大 尺寸 。 
所 设置 的 数值 为 浮 点 型 数字 ， 最 小 值 为 0.0， 最 大 值 为 10.0， 其 默认 值 为 maximum-scale = 1.6 
initial-scale 设置 初始 视 口 的 缩放 比例 。 
所 设置 的 数值 为 浮 点 型 数字 ， 介 于 minimum-scale 与 maximum-scale 之 间 ， 例 如 
initial-scale=1.0 
user-scalable 设置 是 否 允 许 对 浏览 器 页 面 执 行 缩放 操作 。 
默认 情况 下 ，user-scalable = yes 表 示人 允许 执行 缩放 。 如 有 末 设 置 为 user-scalable = no， 则 表示 禁止 对 
页 面 执行 缩放 


如 条 没有 设置 viewport， 界 面 将 会 进行 缩放 并 呈现 全 部 内 容 。 以 “Hello World!” 页 面 为 例 ， 
如 果 不 设 置 viewport， 那 么 页 面 将 会 被 变 成 如 图 11-2 所 示 的 样子 。 显 然 ， 如 果 不 设 置 viewport ， 
页 面 内 容 将 会 被 压缩 得 很 小 以 至 于 无 法 正 浓 阅 谈 ， 这 就 是 在 移动 页 面 中 必须 设置 viewport 的 
原因 。 


$ 


国 192.168.1.100/jqm/Sectio 十 


图 11-2 没有 设置 viewport 的 “Hello World!” 页 面 


11.1.2 媒体 查询 

移动 设备 浏览 人 和 昌 面 浏览 带 的 内 容 布 局 设计 有 很 多 不 同 , 例如 基于 jQuery Mobile 开 发 的 应 
用 一 般 震 要 同时 文 持 水 平和 垂直 方 加 这 两 种 显示 方式 。 此 外 , 移动 应 用 还 需要 文 持 各 种 分 辨 率 下 
的 移动 设备 ， 从 3.7 寸 的 手机 浏览 可 到 12 寸 的 平板 电脑 。 
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对 于 移动 应 用 而 言 ， 当 移动 设备 的 方 问 或 者 分 辨 率 不 同时 ， 移 动 应 用 可 以 相应 加 载 不 同 的 
CSS 定 义 ， 并 根据 不 同 的 CSS 定 义 呈 现 不 同 的 布局 、 字 体 、 字 号 和 配色 等 。 在 jQuery Mobile 应 用 
中 使 用 媒体 查询 ( media query ) 技术 的 初衷 就 是 为 了 文 持 前 面 所 提 到 的 这 些 场景 。 

媒体 查询 技术 可 以 基于 当前 移动 设备 浏览 融 窗 口 尺 寸 的 不 同 而 动态 加 载 不 同 的 CSS 文 件 或 
CSS 定 义 。 如 果 程 序 运 行 在 如 面 浏 览 带 ， 那么 媒体 查询 也 可 以 基于 果 面 浏览 器 窗口 尺寸 的 不 同 而 
加 载 不 同 的 CSS。 例 如 ， 在 低 分 辨 率 的 移动 设备 下 ， 基 于 媒体 查询 技术 所 加 载 的 CSS 布 局 是 单 栏 
布局 ， 而 在 高 分 辩 率 的 移动 设备 下 则 月 动 变 成 多 栏 布局 。 此 外 , 在 高 分 辨 率 环境 下 的 背景 图 片 也 
可 能 会 加 载 更 高 分 辨 座 的 图 片 。 

在 媒体 查询 中 ， 为 不 同 的 分 辨 率 加 载 不 同 CSS 的 边界 值 也 叫做 折断 点 。 在 大 多 数 应 用 场景 
下 ， 媒 体 碍 询 的 折断 点 需要 使 用 相对 尺寸 em 进行 设置 ， 而 不 可 以 使 用 像素 。 在 移动 设备 中 ， 尽 
管 浏览 妖 的 尺寸 可 能 是 相同 的 ， 但 是 因为 移动 设备 屏 雄 的 分 辨 率 不 同 ， 浏览 右 的 水 平和 竖 直 方 
问 的 像素 数量 差异 会 很 大 。 如 果 以 像素 来 设置 折断 点 ， 则 在 高 分 辩 率 屏 戎 下 界面 呈现 可 能 会 出 


现 异 第 。 


注意 ” 自 jQuery Mobile 1.3.0 版 本 以 来 ， 它 开始 支持 响应 式 设计 ， 这 也 是 建立 在 媒体 查询 的 基础 
之 上 的 。 基 于 响应 式 设 计 ， 移 动 应 用 程序 将 自动 根据 移动 设备 的 分 辨 率 而 组 织 表格 的 排 
版 和 内 容 呈 现 方式 ， 具 体内 容 请 参见 第 12 章 。 


下 面 这 段 代码 通过 媒体 查询 技术 识别 屏 希 不 同 的 显示 方向 ， 从 而 加 载 不 同 的 CSS 文 件 : 


《1-- 坚 直 方向 显示 ， 则 加 载 portrait.css 文 件 --> 

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /> 
《<1-- 水 平方 向 显示 ， 则 加 载 landscape.css 文件 --> 

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /> 


其 中 portrait.css 文 件 的 代码 如 下 : 


body{ 
background-color:#FFF ; 
color:#000; 


} 
landscape.css 文 件 的 代码 如 下 : 


body{ 
background-color:#000; 
color:#FFF; 

jl; 


当 屏 问 方 癌 为 竖 直 方 同时 ，portrait.css 文 件 的 内 容 被 加 载 ， 此 时 为 黑色 缘 景 、 日 色 文 字 。 当 
屏幕 转 回 水 平方 回 时 ，landscape.css 文 件 的 内 容 被 加 载 ， 屏 幕 显示 变 为 日 色 背 景 、 黑 色 文 字 。 这 
样 的 显示 效果 变化 是 不 需要 重新 下 载 CSS 文 件 的 ， 而 是 在 触发 媒体 查询 的 时 候 由 浏览 需 自 动 加 载 
不 同 CSS 文 件 的 内 容 并 实现 页 面 呈 现 的 。 
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小 经 验 在 使 用 Android 模 拟 器 开发 移动 应 用 时 ,可 以 使 用 快捷 键 触发 屏幕 旋转 , 比如 按 Ctrl+F11 
组 合 键 ， 模 拟 器 按照 顺 时 针 旋 转 ， 按 Ctrl+F12 组 合 键 ， 模 拟 器 按照 送 时 针 旋 转 。 


使 用 媒体 查询 方法 加 载 不 同 CSS 文 件 的 示例 代码 参见 代码 清单 11-1。 
代码 清单 11-1 ”基于 媒体 查询 技术 加 载 不 同 的 CSS 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
《<1-- 坚 直 方向 显示 ， 则 加 载 portrait.css 文 件 --> 
<link href="MediaQueries01/portrait.css" rel="stylesheet" type="text/css" 
media="all and (orientation:portrait)" /> 
《<1-- 水 平方 向 显示 ， 则 加 载 landscape.css 文 件 --> 
<link href="MediaQueries01/landscape.css" rel="stylesheet" type="text/css" 
media="all and (orientation:landscape)" /> 


</head> 
<body> 
不 同 屏 幕 万 向 下 ， 基 于 媒体 查询 技术 所 呈现 的 文字 颜色 和 背景 色 是 不 同 的 。 
</body> 
</html> 


运行 上 述 代码 ， 得 到 的 运行 结果 如 图 11-3 和 图 11-4 所 示 。 


| 


不 同 屏幕 方向 下 分 辨 率 不 同 ， 基 于 媒体 查询 
技术 所 呈现 的 训 字 颜色 和 背景 色 是 趟 同 的 ， 


图 11-3” 竖 直方 向 下 媒体 查询 呈现 效果 
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不 同 屏幕 方向 下 分 状 率 不 同 ， 基 于 媒体 查询 技术 所 呈现 的 文字 颜色 和 背景 
色 是 不 同 的 。 


图 11-4 水 平方 向 下 媒体 查询 呈现 效果 


对 于 不 同 的 显示 设备 ,例如 不 同 分 辨 率 的 手机 或 平板 电脑 , 可 以 通过 识别 不 同 的 屏 戎 宽度 来 
加 载 不 同 的 CSS 文 件 ， 示 例 代 码 如 下 : 

<!-- 最 小 屏幕 宽度 为 481pX 时 ， 则 加 载 style.css 文 件 --> 

<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" /> 

<1-- 最 大 屏幕 宽度 为 480pX 时 ， 则 加 载 style mobile.css 文 件 --> 

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" 

href="style mobile.css" /> 


需要 注意 的 是 ， 如 用 所 开发 的 应 用 面 风 移动 设备 、 平板 电脑 和 时 面 麟 览 带 等 多 种 运行 环境 ， 
媒体 查询 的 折断 点 写法 会 略 有 区 别 。 通 常 ，only screen and (max-device-width: 480px) 多 用 于 
移动 设备 ， 而 screen and (min-device-width: 481px) 多 用 于 名 见 的 昌 面 浏览 需 或 平板 电脑 。 这 是 
一 种 基于 经 验 的 写法 ， 开 发 者 会 针对 移动 设备 浏览 希 和 时 面 浏览 硕 开 发 不 同 的 CSS 布 局 和 配色 
等 。 当 训 览 融 宽 度 小 于 480 像 素 时 ， 则 使 用 为 移动 设备 所 开发 的 CSS 布 局 和 配色 。 而 如 果 浏 览 天 
的 宽度 超过 480 像 素 , 则 使 用 为 昌 面 浏览 杭 和 平板 电脑 所 开发 的 CSS 布 局 和 配色 。 也 正 是 因为 “480 
像素 ”的 设 定 是 基于 经 验 的 , 开发 者 可 以 根据 实际 应 用 场景 选择 合适 的 CSS 媒 体 查 询 规则 。 例 如， 
如 有 果 知 要 同时 支持 高 分 辨 率 屏 希 的 移动 设备 ， 则 可 能 需要 使 用 相对 尺寸 ecm， 而 不 能 用 像素 来 设 
置 折 汤 点 。 

对 于 早期 版 本 的 IE 浏 览 絮 ， 可 能 不 支持 媒体 查询 技术 。 作 为 一 种 变通 的 方法 ,可 以 写成 这 样 
的 形式 。 


<!--[if IE]><Link rel="stylesheet" type="text/css" href="style.css" media="screen" /><![endif]--> 
事实 上 ， 在 面向 移动 设备 的 开发 中 ，<!--[if IE]>..<![endif]--> 的 写法 通常 很 少 用 到 ， 这 主 
要 是 因为 在 移动 设备 中 很 少 有 人 使 用 正 。 


小 经 验 ”早期 的 jQuery Mobile 测 试 版 本 通过 Media Query Helper 类 来 识别 屏幕 方向 ， 而 在 jQuery 
Mobile 1.0 之 后 ,我们 通过 CSS3 的 媒体 查询 技术 提供 支持 , 而 不 再 使 用 Media Query Helper 
类 。 如 果 开 发 者 是 从 早期 的 jQuery Mobile 升 级 或 者 迁移 到 新 版 本 ， 需 要 留心 这 个 变化 。 
阅读 jQuery Mobile 技 术 资 料 的 时 候 ， 建 议 留 心 范例 代码 所 使 用 的 jQuery Mobile 版 本 。 
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11.1.3 ”背景 图 片 进 阶 


基于 不 同 的 屏 硕 分 辨 率 或 者 屏 硕 方 癌 , 通过 媒体 查询 技术 选择 加 载 不 同 的 CSS 文 件 , 是 CSS3 
之 后 的 新 特性 ,这 个 特性 还 经 消 用 于 加 载 合 适 太 寸 和 比例 的 背景 网 片 。 例 如 ， 可 以 在 分 辨认 更 高 
的 屏 硕 下 加 载 更 记分 状 访 的 图 片 。 
要 人 处理 CSS3 的 背景 图 片 ， 通 常 还 会 用 到 这 几 个 属性 : background-origin、background-clip 
和 background-size。 
D background-origin: 用 于 定位 背景 图 片 的 位 置 ， 其 语法 为 padding-box | border-box 
|content-box， 其 中 各 个 属性 及 其 含义 如 表 11-2 所 示 。 


表 11-2 background-origin 属 性 


属 性 含义 
padding-pox 背景 图 片 相对 于 Padding Box 中 的 定位 
border-box 背景 图 片 相对 于 Border Box 中 的 定位 
content-box 背景 图 片 相 对 于 Content Box 中 的 定位 


口 background-clip: 用 于 指定 背景 颜色 的 区 域 ， 其 语法 为 background-clip: border-box 
|padding-box | content-box， 其 中 各 个 属性 及 其 含义 如 表 11-3 所 示 。 


表 11-3 background-clip 属 性 


属 性 含义 
padding-box 背景 闫 色 从 Padding Box 处 裁剪 
border-box 背景 颜色 从 Border Box 处 裁剪 
content-box 背景 颜色 从 Content Box 处 裁剪 


D background-size: 用 于 设 定 背景 图 片 的 尺寸 ， 其 语法 为 length | percentage | cover 
contain， 其 中 各 个 属性 及 其 含义 如 表 11-4 所 示 。 


表 11-4 background-size 属 性 及 其 伟 义 

属 性 含义 
设 定 背景 图 片 的 高 度 与 宽度 ， 第 一 个 值 是 宽度 ， 第 二 个 是 高 度 。 如 果 只 给 出 一 个 值 ， 则 第 
二 个 值 默认 设置 为 auto。 例 如 background-size: 200px 200px 和 background-size: 200px 
基于 父 级 元 系 的 尺寸 ， 以 百分比 设置 背景 图 片 的 宽度 和 高 度 。 第 一 个 值 是 宽度 ， 第 二 个 
percentage 是 高 度 。 如 果 只 给 出 第 一 个 值 ， 则 第 二 个 值 默认 设置 为 auto。 例 如 background-size: 70% 

70% 和 background-size: 80% 

缩放 图 片 ， 以 完全 填充 整个 背景 区 域 。 在 这 个 设 定之 下 ， 部 分 图 片 可 能 会 超出 背景 区 域 的 


length 


COVEr a 
汇 围 
a 缩放 背景 图 片 ， 以 固定 长 宽 比 例 填 充 背 景区 域 。 在 这 个 设 定 下 ， 如 果 背 景区 域 的 比例 和 图 


片 比例 不 一 怪 ， 则 可 能 会 出 现 留 日 
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11.2 ”改变 屏幕 方向 


移动 设备 的 宽度 和 蜗 度 发 生 转 换 ， 可 能 是 由 于 移动 设备 的 方 问 发 后 变化 而 产生 的 。 如 采 移 动 
设备 的 屏幕 方向 发 生 改 变 , 将 会 触发 orientationchange 事 件 , 例如 设备 屏幕 从 水 平方 向 转 为 竖 直 
方 问 时 ， 将 执行 如 下 代码 : 

$Cwindow) .bind('"orientationchange'，function(){ 

ee 

如 条 要 禁用 orientationchange 事 件 ， 可 以 在 jQuery Mobile 页 面 中 通过 设置 $.mobile. 
orientationChangeEnabled = false 来 实现 。 


小 经 验 在 Android 浏 览 器 中 ， 当 触发 orientationchange 事 件 时 ，screen.width 和 screen.height 
属性 的 值 会 同时 发 生变 化 ， 但 是 在 一 些 手 机 ( 例如 iPhone ) 中 却 可 能 不 会 发 生 。 


代码 清单 11-2 实 现 了 啊 应 屏 共 方 向 改 变 事件 的 代码 。 在 这 个 事件 中 ， 屏 硕 的 宽度 和 高 度 会 通 
过 消息 和 框 呈现 出 来 。 而 在 不 同 的 屏 需 方 同 下 ，Android 移 动 设备 的 宽度 和 高 度 会 发 生 互 换 。 


代码 清单 11-2 ”屏幕 方向 旋转 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 


// 取 消 下 面 这 行 注释 ， 可 以 观察 ofientationChangeEnabled 设 置 的 结果 
//$.mobile.orientationChangeEnabled = false; 


$(window) .bind('orientationchange', function(){ 
alert(' 屏 幕 方 向 发 生 改 变 。\n 屏 幕 宽 度 '+screen.width+' 像 素 \n 屏 幕 高 度 ， 
+SCreen.height+' 像 素 '); 
}); 
</script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page1" data-ITole= page > 
<header data-role="header"> 
<h1>jQuery Mobile 跨 平台 移动 应 用 </h1> 
</header> 
<div class="content" data-role="content"> 
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《<p> 当 屏幕 方向 发 生 改 变 时 ， 将 触发 orientationchange 事 件 。</p> 
</div> 
<footeT data-role="footer"></footer> 
</section> 
</body> 
</html> 


运行 代码 清单 11-2， 得 到 的 结 来 如 图 11-5 所 示 。 


屏幕 方向 发 生 改 变 。 


屏幕 宽度 800 像 素 
屏幕 高 度 480 像 素 


OK 


图 11-5 ”改变 屏 舌 方 同 时 ， 会 触发 orientationchange 事 件 


11.3 分 栏 布局 


在 之 前 各 革 中 ， 主 要 的 排版 布局 是 一 栏目 上 而 下 将 内 容 顺 序列 出 。 在 这 一 市 中 ,我 们 主要 
介绍 一 下 分 栏 布 局 。 使 用 分 栏 方式 排版 ， 将 有 助 于 在 一 个 有 限 的 屏幕 空间 内 更 有 序 地 展示 更 多 
内 容 。 

在 移动 设备 浏览 融 显 示 矿 才 比 较 小 而 显示 内 容 为 大 段 文 字 或 刚 文 混 排 为 主 的 页 面 中 , 通常 不 
会 使 用 多 栏 排 版 。 在 高 分 辨认 的 移动 设备 浏览 太 中 , 分 柱 显 示 有 助 于 更 好 地 利用 屏 磋 空间 ,提升 
用 户 体验 。 因 此 ， 有 时 候 ， 使 用 的 排版 布局 与 目标 受众 的 设备 种 类 相关 。 


注意 在 一 些 场景 下 ， 移 动 设备 的 分 辨 率 跨度 很 大 ， 这 就 需要 用 到 用 户 界 面 的 响应 式 设计 来 帮 
助 改 善 移动 应 用 界面 设计 ， 这 将 可 能 需要 在 不 同 分 辨 率 的 移动 设备 中 使 用 不 同 的 分 栏 
布局 。 


对 于 传统 的 果 面 浏览 莫 ， 通 常 有 两 种 方法 来 实现 布局 设计 。 

口 通过 CSS 与 div 集 成 的 方式 实现 版 式 布局 。 

口 通过 定制 没有 框 线 的 ctable> 表 格 实现 布局 设计 。 

不 论 使 用 哪 种 方式 来 实现 布局 ,都 可 以 设计 富有 表现 力 的 布局 。 然 而 , 这些 并 不 完全 适合 移 
动 应 用 的 使 用 场景 。 虽然 当下 主流 的 移动 设备 浏览 絮 可 以 显示 大 多 数 页 面 , 不 管 这 样 的 页 面 是 为 
移动 应 用 还 是 为 果 面 浏览 姻 设 计 的 。 不过, 移动 设备 的 屏幕 尺寸 和 计算 能 力 毕 竞 有 限 ， 在 移动 设 
备 上 使 用 面向 果 面 浏览 器 所 开发 的 应 用 并 不 方便 。 面 回 移动 设备 浏览 器 而 优化 移动 应 用 ,以 更 加 


-大 
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简洁 、 高 效 和 实用 的 方式 进行 移动 应 用 布局 设计 ， 这 正 是 jQuery Mobile 所 实现 的 。 

jQuery Mobile 通 过 文 持 分 栏 布局 ,提供 了 简单 而 有 效 的 界面 排版 方式 ,开发 者 可 以 使 用 jQuery 
Mobile 原 生 的 布局 方式 快速 生成 界面 风格 统一 的 分 栏 布局 。 当 然 ， 如 末 开 发 者 需要 更 丰富 的 分 栏 
方式 ， 也 可 以 使 用 其 他 方式 进行 定制 化 开发 。 

jQuery Mobile 分 栏 布局 是 通过 CSS 定 义 实现 的 ， 主 要 包含 两 个 部 分 ， 即 栏目 数量 以 及 内 容 所 
在 栏目 的 次 序 ， 具 体 如 表 11-5 所 示 。 


表 11-5 ”定义 分 栏 


功 能 语 法 
定义 栏目 数量 ui-guid-a/b/c/d 
例如 <div class="ui-grid-a">..</div> 表 示 二 栏 布局 
定义 内 容 块 在 栏目 中 的 位 置 ui-block-a/b/c/d/e 


例如 <div class="ui-block-b">..</div> 表 示 内 容 被 填充 于 第 二 栏 


在 表 11-5 中 , ui-grid-a/b/c/d 分 别 表 示 对 应 的 <div> 或 <section> 中 的 栏目 数量 , 分 别 为 二 栏 、 
三 栏 、 四 栏 、 五 栏 。 而 ui-block-a/b/c/d/e 分 别 表 示 相 应 内 容 块 位 于 第 一 栏 、 第 二 栏 、 第 三 栏 、 
第 四 栏 或 者 第 五 栏 。 


注意 ”这 里 的 栏目 数量 是 从 两 栏 开 始 的 ， 栏目 数量 的 最 大 值 是 $ 栏 ， 所 以 表示 布局 分 为 五 栏 的 序 
号 为 4d，CSS 定 义 为 ui-grid-d。 
标记 内 容 所 在 栏目 的 位 置 是 从 第 一 栏 开始 的 ， 所 以 ， 第 5 栏 所 对 应 的 为 e，CSS 会 表示 为 
ui-block-e, 
这 是 开发 者 很 容易 芯 忽 的 地 方 。 


下 面 举例 说 明 如 何 使 用 CSS 定 义 实现 两 栏 布局 . 


<div class="ui-grid-a"> 
<div class="Uui-block-a"><p> 第 一 栏 </p></div> 
<div class="Ui-block-b"><p> 第 二 栏 </p></div> 
</div> 


运行 上 述 代码 ， 得 到 的 运行 结果 如 图 11-6 所 示 。 


注意 在 实际 的 应 用 中 ， 分 栏 布局 不 会 存在 图 11-6 中 的 边框 线 。 在 上 述 示例 中 ， 为 了 能 够 明晰 
两 栏 布 局 的 边界 ， 我 们 在 CSS 中 将 内 容 的 背景 设置 为 白色 ， 而 将 边框 设置 为 一 个 像素 宽 
度 的 黑色 实 线 框 。 


在 分 栏 布局 中 ,各 个 内 容 的 冤 度 通常 是 平均 分 配 的 。 对 于 不 同 的 栏 数 ， 各 个 分 柱 的 冤 度 比例 
如 表 11-6 所 示 。 


分 栏 数 量 
二 栏 布局 
三 栏 布局 
四 栏 布局 
五 栏 布局 


分 栏 越 多 ,每 栏 在 屏 到 中 的 太 寸 就 越 小 ， 这 在 移动 应 用 开发 中 知 要 格外 小 心 。 如 来 在 屏 硕 人 


寸 较 小 的 手机 浏览 各 上 显示 四 栏 或 者 五 栏 的 布局 , 并 且 每 个 分 栏 中 都 是 相对 字数 较 多 的 文字 或 图 
片 内 容 ,， 则 可 能 会 因为 界面 呈现 局 促 而 降低 用 户 体验 。 如 采 在 多 栏 布 局 中 , 每 个 分 栏 包含 的 是 一 
个 含义 清晰 美观 的 图 标 按钮 , 则 可 能 会 属 得 更 好 的 用 户 体验 。 代 码 清 单 11-3 完 整地 实现 了 两 栏 布局 。 


多 


国 192.168.1.100/jqm/Sectio ”到 


两 栏 布局 


图 11-6 ”两 栏 布局 


表 11-6 不同 分 栏 所 占 的 比例 


11.3 分 栏 布局 


每 栏 内 容 所 占 的 宽度 
50% 
大 约 33% 
25% 
20% 
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代码 清单 11-3 ”两 栏 布局 的 示例 代码 


《1DOCTYPE html> 
<html> 
<head> 


<meta charset="utf-8"> 


<meta name="viewport" content="width=device-width, initial-scale=1"> 


<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 


<script src="../js/jqvery-1.7.1.min.]js"></script> 


<style> 


/* 自 定义 CSS， 用 以 标 误 两 栏 布局 边框 范围 */ 


.content div divp { 
background-color: #fff; 
border: 1px solid #000; 


</style> 


<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 


</head> 
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<body> 
《Section id="page1" data-role="page"> 
<header data-role="header"> 
<h1> 两 栏 布局 </h1> 
</header> 
<div class="content" data-role="content"> 
<div class="vui-grid-a"> 
<div class="ui-block-a"><p> 第 一 栏 </p></div> 
<div class="Uui-block-b"><p> 第 二 栏 </p></div> 
</div> 
</div> 
<footeT data-role="footer"></footer> 
<«/section> 
</body> 
</html> 


如 果 需 要 移动 应 用 支持 更 多 的 分 柱 ， 可 以 通过 增加 分 栏 来 实现 。 在 下 面 的 五 栏 布局 中 ,我 们 
依次 加 入 标记 为 ui-block-c 到 ui-block-e 的 CSS 定 义 ， 实 现 了 第 三 栏 到 第 五 栏 的 定义 : 


<div class="ui-grid-d"> 
<div class="Uui-block-a"><p> 第 一 栏 </p></div> 
<div class="ui-block-b"><p> 第 二 栏 </p></div> 
<div class="ui-block-c"><p> 第 三 栏 </p></div> 
<div class="Ui-block-d"><p> 第 四 栏 </p></div> 
<div class="Uui-block-e"><p> 第 五 栏 </p></div> 
</div> 


注意 ”在 jQuery Mobile 中 使 用 这 样 的 方式 定义 分 栏 数 量 ,最 多 可 以 定义 5 个 分 栏 。 如 果 开 发 者 需 
要 更 多 的 分 栏 布局 ， 则 需要 自己 开发 CSS 布 局 来 实现 。 


如 采 分 柱 设 计 的 内 部 还 希望 有 多 行 的 设计 ， 例 如 两 个 4 栏 布局 目 上 而 下 排列 ， 通 党 并 不 需要 
重复 设置 多 个 cdiv class="ui-grid-b">..</div> 标 签 ， 而 只 需 顺 序 排列 包含 有 vi-block-a/b/c/d/e 
定义 的 div 即 可 。 

图 11-7 所 示 的 样式 就 是 通过 顺序 排列 ui-block-a/b/c 中 的 各 块 内 容 实现 的 ， 其 实现 代码 如 代 
码 清单 11-4 所 示 。 


代码 清单 11-4 多 行 分 栏 布 局 


<div class="vui-grid-b"> 
<div class="Uui-block-a"><p> 第 一 行 Cbr/> 第 一 栏 </p></div> 
<div class="Ui-block-b"><p> 第 二 栏 </p></div> 
<div class="Ui-block-c"><p> 第 三 栏 </p></div> 
<div class="Uui-block-a"><p> 第 二 行 <br /> 第 一 栏 </p></div> 
<div class="Ui-block-b"><p> 第 二 栏 </p></div> 
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<div class="Ui-block-c"><p> 第 三 栏 </p></div> 
<div class="ui-block-a"><p> 第 三 行 <br /> 第 一 栏 </p></divy> 
<div class="Ui-block-b"><p> 第 二 栏 </p></div> 
<div class="Ui-block-c"><p> 第 三 栏 </p></div> 
</div> 
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国 192.168.1.100/jqm/Sectio 至 


三 栏 多 行 布 局 


图 11-7 三 栏 多 行 布局 


11.4 可 折 妓 内 容 块 


可 折 羞 内容 块 是 指 特定 标记 内 的 图 文 内 容 或 表单 可 以 被 折 著 起 来 ， 它 通常 由 两 部 分 组 
成 一 一 头 部 按钮 和 可 折 著 内 容 。 当 用 户 需 要 操作 的 时 候 ， 直接 点 击 涉 部 按钮 即 可 展开 或 者 折 著 所 
包含 的 内 容 ， 如 图 11-8 所 示 。 


可 折 营 内 容 块 EE EE 


ka 折 登 内 容 的 头 部 按钮 加 折 营 内 容 的 头 部 按钮 


驮 认 情 况 ， 折 登 内 容 被 收 起 。 当 点 击 
折 登 内 容 的 头 部 按钮 时 ， 则 内 容 被 打 
开 。 


图 11-8 左 侧 为 折 县 状态 ， 右 侧 为 打开 状态 


由 于 移动 设备 的 屏 帮 相对 较 小 , 字号 通常 也 比较 小 ， 所 以 如 来 将 内 容 全 部 展开 ,篇幅 可 能 会 
很 长 ， 此 时 定位 内 容 也 需要 手工 不 断 翻 屏 ,这 将 影响 阅读 体验 。 使 用 可 折 鳃 内 容 块 ， 可 以 帮助 用 
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户 很 快 定位 到 相关 主题 ,展开 可 折 著 内 容 块 之 后 就 可 以 下 接 阅 读 或 执行 相应 操作 。 因 此 ,使 用 可 
折 车 内 容 块 改善 了 阅读 体验 。 

使 用 jQuery Mobile 建 立 的 可 折 和 登 内 容 块 通常 由 如 下 3 部 分 组 成 。 

口 定义 data-role 属 性 为 collapsible 的 DIV DOM 对 象 ， 用 以 标记 折 丢 内 容 块 的 范围 。 

口 以 标题 标签 定义 可 折 著 内 容 块 的 标题 。 在 可 折 车 内 容 块 中 ， 这 个 标题 将 呈现 为 一 个 用 以 

控制 展开 或 折 针 的 按钮 。 
口 可 折 共 内 容 块 的 内 容 。 
实现 图 11-8 所 示 的 效果 的 代码 参见 代码 清单 11-5。 


代码 清单 11-5” 折 至 代码 


<div data-role="collapsible"> 

《<h3> 折 登 内 容 的 头 部 按钮 </h3> 

默认 情况 下 ， 折 登 内 容 被 收 起 。 当 点 击 折 登 内 容 的 头 部 按钮 时 ， 则 内 容 被 打开 。 
</div> 


这 里 我 们 使 用 了 h3 标 题 。 事实 上 ,任何 h1 到 h6 级 别 的 标题 在 第 一 行 都 将 呈现 为 折 著 内 容 块 的 
头 部 按钮 。 


通常 ，jQuery Mobile 界面 呈现 不 会 因为 采用 了 低级 别 的 标题 〈 例 如 h6 ) 而 导致 可 折 羞 内容 块 
中 头 部 按钮 的 字体 或 字号 发 生 改 变 ， 例 如 : 


<div data-role="collapsible"> 
<h1> 标 记 为 h1 的 头 部 按钮 */h1> 

</div> 

<div data-role="collapsible"> 
《<h6> 标 记 为 h6 的 头 部 按钮 </h6> 

</div> 


这 段 代码 的 运行 结果 如 图 11-9 所 示 ， 从 中 可 以 看 到 ，h1 与 h6 标 题 的 呈现 效果 是 一 致 的 。 


可 折合 内 容 块 


标记 为 h1 的 头 部 按钮 


标记 为 h6 的 头 部 按钮 


图 11-9 ”可 折 又 内 容 块 中 ht 和 h6 标 题 的 呈现 效果 一 致 
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11.4.1 册 套 可 折 色 内 容 块 
虽然 每 个 可 折 羞 内容 块 只 能 作用 于 一 个 内 容 块 区 域 , 但 是 它 也 可 以 通过 级 联 方 式 包 含 其 他 可 


折 蕉 内容 块 , 这 是 一 种 树 状 信息 组 织 。 不过， 由 于 通过 树 状 方式 组 织 内 容 要 求 移 动 设 备 浏览 六 足 


够 完 ， 否 则 无 法 正常 展现 一 级 级 的 树 状 结构 ， 所 有 和 酌 状 结构 在 移动 设备 的 界面 呈现 中 并 不 方便 。 
相 比 之 下 , 使 用 敬 套 的 可 折 著 内 容 块 既 可 以 有 效 地 以 类 似 的 方式 组 织 内 容 的 结构 , 也 能 在 有 限 的 
显示 空间 中 获得 不 错 的 用 户 体 验 。 骨 套 可 折 芋 内容 块 的 示例 图 如 图 11-10 所 示 。 


$ 
团 192.168.1.100/jqm/Sectio 二 国 192.168.1.100/jqm/Sectio 寅 


可 折 霹 内 容 块 可 折 悟 内容 块 


人 鳄 折 营 内 容 的 头 部 按钮 加 折 登 内 容 的 头 部 按钮 


这 里 是 最 外 层 折 格 内 容 块 的 内 容 区 域 . 
-， 被 说 套 的 内 容 


这 里 是 被 该 套 的 内 容 


图 11-10 具有 山 套 内 容 的 可 折 著 内 容 块 的 折 对 与 展开 效果 图 
图 11-10 的 实现 代码 如 代码 清单 11-6 所 示 。 
代码 清单 11-6 骨 套 可 折 著 内 容 块 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page1" data-role="page"> 
<header data-role="header"> 
《<h1> 可 折合 内 容 块 </h1> 
</header> 
<div class="content" data-role="content"> 
<div data-role="collapsible" id="collapsible01" data-theme="e" data-content-theme='b'> 
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<h3> 折 登 内 容 的 头 部 按钮 </h3> 
这 里 是 最 外 层 可 折合 内 容 块 的 内 容 区 域 。 
<div data-role="collapsible" id="sub-collapsible" data-content-theme='c'> 
<h4> 被 谋 套 的 内 容 </h4> 
这 里 是 被 谋 套 的 内 容 
</div> 
</div> 
</div> 
<footeT data-role="footer"></footer> 
<«/section> 
</body> 
</html> 


在 实现 具有 藤 套 关系 的 可 折 车 内 容 块 时 ， 有 几 个 方面 值得 注意 ， 具 体 如 下 所 示 。 

口 外 层 骸 套 可 折 车 内 容 块 和 内 部 可 折 炙 内容 块 最 好 使 用 不 同 的 主题 风格 ， 以 便 使 用 者 分 辩 
不 同 的 可 折 著 内 容 块 级 别 。 

口 各 层 可 折 春 内 容 块 通过 声明 data-content-theme 属 性 定义 内 容 区 域 的 显示 风格 ,这 样 的 设 
置 能 在 可 折 车 内 容 块 的 内 容 边 界 人 处 出 现 一 个 边框 线 。 这 个 边框 线 相对 明显 地 分 割 了 各 级 
机 人 套 内 容 ， 方便 使 用 者 阅读 内 容 块 区 域 的 内 容 。 


11.4.2 属性 


可 折 对 内 容 块 可 以 通过 定义 DOM 容 各 属性 实现 第 用 的 设置 而 不 需要 开发 负 贡 的 JavaScript 程 
序 ， 例 如 界面 样式 、 内 容 块 样式 和 标题 文字 等 ， 如 表 11-7 所 示 。 


表 11-7 可 折 双 内容 块 的 属性 


属 性 功 能 
data-collapsed 设置 为 折 炙 状态 或 展开 状态 ， 其 默认 值 为 true， 表 示 折 苍 状 态 ， 如果 其 值 为 f3lse， 则 为 展开 状 
示例 代码 : 
<div data-role="collapsible"data-collapsed="true"> 
效果 为 : 
被 设置 为 折 心 状态 
示例 代码 : 
<div data-role="collapsible"data-collapsed="false"> 
效果 为 : 
被 设置 为 展开 状态 
Cotesmm jQuery Mobile 1.1.0 开 始 支持 这 个 属性 ， 用 于 设置 内 容 区 域 表 单 组 件 呈 现 为 标准 尺寸 或 者 压缩 尺 


寸 。 其 默认 值 为 false， 表 示 以 标准 尺寸 呈现 。 

如 果 将 其 值 设置 为 true， 则 表单 元 素 呈 现 为 压缩 太 才 。 
示例 代码 : 

<div data-role="collapsible"data-mini="true"> 
效果 为 : 


被 设置 为 mini 
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属 性 功 能 
data-iconpos 设置 可 折 码 内 容 块 标题 的 图 标 位 置 ， 其 可 选 值 如 下 。 
e left: 图 标 位 于 左 侧 ， 这 是 默认 值 。 
e right: 图 标 位 于 右 侧 。 
e top: 图 标 位 于 上 方 。 
e bottom: 图 标 位 于 下 方 。 
e notext: 理论 上 说 ， 此 种 情况 下 文学 会 被 隐藏 而 只 显示 图 标 。 
各 种 效果 的 示例 代码 如 下 : 
<div data-role="collapsible" data-iconpos="left"> 
效果 为 : 
9 图 标 被 设置 在 左 侧 
示例 代码 : 
<div data-role="collapsible" data-iconpos= ITight > 
效果 为 : 
图 标 被 设置 在 右 侧 
示例 代码 : 
<div data-role="collapsible" data-iconpos="top"> 


效果 为 : 


图 标 被 设置 在 上 方 


示例 代码 : 
<div data-role="collapsible" data-Iiconpos=" bottom > 


效果 为 : 


图 标 被 设置 在 下 方 


data-theme 设置 可 折 车 内 容 块 的 主题 风格 ， 数 值 为 a 至 z 
data-content-theme ”设置 可 折 又 内 容 块 内 部 区 域 的 主题 风格 ， 数 值 为 3 至 z 


11.4.3 ”选项 


通过 可 折 和 有 登 内 容 块 的 选项 设置 ,开发 者 可 以 在 初始 化 过 程 中 通过 JavaScript 程 序 对 可 折 和 登 内 容 
块 进行 样式 定制 ， 具 体 可 参见 表 11-8。 


表 11-8 可 折 又 内容 块 的 选项 
选 项 功 能 
collapsed ”设置 默认 状态 为 折 和 县 状态 或 展开 状态 ， 其 默认 值 为 true， 表 示 可 折 县 内 容 块 的 默认 状态 为 折 琶 状态 ; 如果 
将 其 值 设 置 为 false， 则 为 展开 状态 
mini 设置 内 容 区 域 表单 组 件 呈 现 为 标准 尺寸 或 者 压缩 尺寸 。 从 jQuery Mobile 1.1.0 开 始 支持 这 个 选项 ， 其 默认 
值 为 false， 表 示 以 标准 尺寸 呈现 。 如 果 将 其 值 设置 为 true， 则 表单 元 素 呈 现 为 压缩 尺寸 
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( 续 ) 
选 项 功 能 

iconpos 设置 可 折 闪 内 容 块 标题 图 标的 位 置 ， 主 要 有 如 下 可 选项 。 

e left: 图 标 位 于 文字 左 侧 ， 这 是 默认 值 。 

e right: 图 标 位 于 文字 右 侧 。 

e top: 图 标 位 于 文字 上 方 。 

e bottom: 图 标 位 于 文字 下 方 。 

e notext: 无 文字 而 只 有 图 标 。 
theme 设置 可 折 闭 内 容 块 的 主题 风格 ， 数 值 为 a 至 z 
contentTheme 设置 可 折 著 内容 块 内 部 区 域 的 主题 风格 ， 数 值 为 a 至 z。 

注意 这 个 选项 值 和 属性 data-content-theme 命 名 风格 略 有 差别 
collapseCueText 折 著 操作 的 提示 文字 ， 其 默认 值 为 click to collapse contents ( 点击 以 折 著 内 容 块 ) 
expandCueText 展开 操作 的 提示 文字 ， 其 默认 值 为 expand with a click (点 击 以 展开 内 容 块 ) 
heading 设置 显示 的 标题 定义 ， 其 默认 值 为 h1、h2、h3、h4、h5、h6、legend。 

如 果 该 选项 被 设置 ， 而 在 可 折 共 内容 块 中 没有 标记 呈现 的 标题 ， 则 可 折 铬 内 容 块 不 会 呈现 
initSelector 设置 选择 器 ， 以 选择 可 以 被 可 折 著 内 容 块 演 染 的 DOM 容 带 


如 条 jQuery Mobile 程 序 在 初始 化 的 时 候 指 定 了 initselector 选 择 需 所 调 取 的 属性 ， 而 在 
data-role="collapsible" 的 DOM 容 侣 却 没 有 声明 相应 CSS 属 性 的 定义 , 则 这 个 可 折 针 内 容 块 将 不 
会 被 泻 染 。 在 代码 清单 11-7 中 ,由 于 initSelector 选 项 被 设置 为 .mycollapsible, 所 以 只 有 设置 这 
个 CSS 的 class 属 性 值 的 DOM 容 磊 ， 才 可 以 被 演 染 成 可 折 狼 内容 块 。 所 以 第 一 个 可 折 针 内 容 块 的 
DOM 容 右 中 的 内 容 在 界面 中 被 呈现 为 可 折 钱 内容 块 的 样子 。 而 第 二 个 可 折合 内 容 块 因为 没有 设 
置 class 为 .mycollapsible， 所 以 没有 被 演 染 成 可 折合 内 容 块 的 样子 。 


代码 清单 11-7 ”可 折 蕉 内 容 块 initSelector 选 项 示例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(document).bind('mobileinit', function(){ 
$.mobile.collapsible.prototype.options.initSelector = ".mycollapsible"; 
}); 
</script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
《Section id="page1" data-role="page"> 


11.4 可 折 党 内 容 块 217 


<header data-role="header"> 
<h1> 可 折合 内 容 块 </h1> 
</header> 
<div class="content" data-role="content"> 
<div data-role="collapsible" data-collapsed="true" class="mycollapsible"> 
<h3>Class 被 设置 为 mycollapsiblex</h3> 


</div> 
<div data-role="collapsible" data-collapsed="true'"> 


<h3> 未 被 设置 为 mycollapsible </h3> 
</div> 


</div> 
<footer data-role="footer" ></footer> 


</Sectiony> 
</body> 
</html> 


运行 上 述 代 码 ， 得 到 的 运行 结果 如 图 11-11 所 示 。 可 以 发 现 ， 第 二 段 内 容 没 有 被 可 折 著 内 容 
块 泻 染 


可 折 量 内 容 块 


9 Class 被 设置 为 mycollapsible 


未 被 设置 mycollapsible 属 性 


图 11-11 应 用 initSelector 选 项 的 效果 


使 用 可 折 羞 内容 块 的 heading 选 项 时 ， 需 要 开发 者 比较 说 慎 ， 因 为 只 有 被 声明 为 可 折 羞 内容 
块 标题 的 内 容 才 会 成 为 标题 ， 而 其 他 文字 则 会 按照 系统 默认 定义 的 呈现 方式 进行 呈现 。 

图 11-12 显 示 设 置 两 种 不 同 标题 时 的 呈现 效果 。 在 这 个 设置 中 ,可 折 著 内 容 块 中 有 两 个 标题 ， 
按照 通常 情况 , 第 一 个 标题 <h1> 将 会 被 作为 标题 显示 , 但 是 因为 heading 选 项 所 对 应 的 CSS 属 性 被 
设置 在 第 二 个 标题 上 ， 所 以 第 二 个 标题 的 内 容 补 作为 可 折 车 内 容 块 的 标题 被 呈现 出 来 。 图 11-12 
的 实现 代码 如 代码 清单 11-8 所 示 ， 读 者 可 以 留意 其 中 <h1> 和 <h3> 的 顺 友 。 
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EE 
此 标题 被 用 于 显示 


不 被 显示 的 标 古 


正文 内 容 


未 包含 在 折 硬 内 容 块 中 的 文字 。 


图 11-12 ”应 用 heading 选 项 的 效果 


代码 清单 11-8 应 用 heading 选 项 不 当 的 情况 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script type="text/javascript"> 
$(document).bind('mobileinit', function(){ 
$.mobile.collapsible.prototype.options.heading = ".mycollapsibleheading"; 
}); 
</script> 
<script src="../jJs/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<section id="page1" data-ITole= page > 
<header data-Tole= header > 
《<h1> 可 折 滞 内 容 块 </h1> 
</header> 
<div class="content" data-role="content"> 
<div data-role="collapsible" data-collapsed= true”data-content-theme= b > 
<h1> 不 被 显示 的 标题 </h1> 
<h3 class="mycollapsibleheading"> 此 标题 被 用 于 显示 </h3> 
正文 内 容 
</div> 
<div data-role="collapsible" data-collapsed="true"> 
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<h3> 由 于 未 设置 CSS 属 性 ， 这 段 折 登 内 容 块 不 会 被 显示 </h3> 

</div> 
未 包含 在 折合 内 容 块 中 的 文字 ，。 

</div> 

<footer data-role="footer"></footer> 

<«/section> 
</body> 
</html> 


通常 , 在 可 折 车 内 容 块 中 没有 声明 heading 选 项 的 情况 下 , 应 该 是 第 一 个 <h1> 标 签 所 包含 的 内 
容 被 呈现 为 可 折 著 内 容 块 的 标题 ， 而 不 应 该 是 第 二 个 。 但 是 对 前 面 代码 进行 初始 化 的 时 候 ， 声明 
特定 class 属 性 的 内 容 才 可 以 用 作 标 题 ， 所 以 第 一 个 ch1> 标 签 的 内 容 没 有 呈现 为 标题 ， 而 在 它 之 
后 的 <h3 class="mycollapsibleheading"> 所 包含 的 内 容 成 了 这 个 可 折 告 内容 块 的 标题 。 


注意 这 个 应 用 场景 其 实 包含 两 个 折 爱 内 容 块 ， 但 是 因为 第 二 个 折 胎 内容 块 没有 声明 用 于 显示 
的 class， 所 以 在 最 终 的 浏览 器 呈现 界面 中 ,第 二 个 折 营 内 容 块 的 内 容 没有 显示 出 来 。 这 
是 开发 时 需要 小 心 的 。 


11.4.4 ”事件 
可 折 付 内 容 块 的 事件 用 以 响应 操作 行为 ， 常 用 的 事件 主要 包括 3 种 ， 如 表 11-9 所 示 。 
表 11-9 可 折叠 内 容 块 的 事件 


事 件 功 能 
create 可 折 半 内容 块 被 创建 时 触发 
collapse 可 折合 内 容 块 被 折 苹 时 触发 
expand 可 折 车 内 容 块 被 展开 时 触发 


只 要 打开 包含 有 可 折合 内 容 块 的 页 面 时 , 折 难 或 展开 事件 就 会 被 仍 发 一 次 。 这 个 事件 触发 发 
生 在 可 折合 内 容 块 生成 的 时 候 , 事件 的 触发 也 与 是 否 手工 展开 或 者 折合 没有 和 朋 接 关系 。 所 以 , 在 
进行 可 折 炙 内容 块 的 事件 绑 定时 ， 需 要 注意 绑 定 程序 的 位 置 。 

代码 清单 11-9 是 绑 定 可 折 琶 内 容 块 事件 啊 应 的 代码 片段 ， 运 行 效 打 参 见 网 11-13。 


代码 清单 11-9” 折 车 内 容 块 事件 


$(document).ready(function(e) { 
$(document).delegate("#collapsible01","expand", function(){ 
alert(' 内容 被 展开 '); 
}); 
$(document).delegate("#collapsible01","collapse", function(){ 
alert(' 内容 被 折合 '); 
}); 
}); 
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内 容 被 展开 内 容 被 折 司 


图 11-13 左 图 为 expand 事 件 触 发 的 效果 ， 右 图 为 co11apse 事 件 触发 的 效果 


11.5 ”折合 组 


折 又 组 ( collapsible set ) 按照 从 上 到 下 的 顺序 排列 可 折 双 内 容 块 ， 这 使 界面 的 整体 感 更 强 ， 
示例 网 如 图 11-14 所 示 。 


四 可 折合 内 容 块 01 加 可 折合 内 容 块 01 


人 可 匠 和合 内 容 块 02 可 折 登 内 容 块 内 容 
shioiooe @ 可 折 登 内 容 块 02 


人 @ 可 折 登 内 容 块 03 


图 11-14 ” 折 闭 组 折 苹 与 展开 样式 


图 11-14 的 实现 代码 如 代码 清单 11-10 所 示 , 在 这 个 代码 片段 中 , 折 欠 组 DOM 容 硕 中 依次 放置 
了 3 个 可 折 羞 内容 块 。 
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代码 清单 11-10” 折 锥 组 


<div data-role="collapsible-set"> 
<div id="collapsible01" data-role="collapsible" data-content-theme='b'> 
<h3> 可 折合 内 容 块 01</h3> 
可 折合 内 容 块 内 容 
</div> 


<div id="collapsible02" data-role="collapsible" data-content-theme='b'> 
<h3> 可 折 登 内 容 块 02</h3> 
可 折合 内 容 块 内 容 

</div> 


<div id="collapsible03" data-role="collapsible" data-content-theme='b'> 
《<h3> 可 折 登 内 容 块 03</h3> 
可 折合 内 容 块 内 容 
</div> 
</div> 


正如 其 名 称 所 展现 的 那样 , 折 锥 组 就 是 由 奋 干 个 独立 的 可 折 著 内 容 块 集合 而 成 的 。 通过 其 代 
但 结构 , 也 可 以 看 到 这 样 的 特点 , 鱼 干 可 折 著 内 容 块 被 一 个 标记 为 collapsible-set 的 容 磊 集合 在 
一 起 ， 并 作为 一 个 整体 在 移动 设备 浏览 器 中 呈现 。 

由 于 折 著 组 是 由 硅 十 独立 的 可 折 著 内 容 块 按照 顺序 集 和 而 成 的 , 所 以 呈现 出 的 属性 、 选 项 和 
事件 与 可 折 针 内 容 块 非常 类 似 。 

值得 注意 的 是 ， 折 车 组 的 事件 和 可 折合 内 容 块 的 事件 略 有 不 同 ， 它 只 有 create 事 件 而 没有 
collapse 和 expand 事 件 ， 这 是 由 于 折 革 组 是 各 个 可 折合 内 容 块 的 集合 。 对 于 这 个 集合 而 言 ， 是 不 
存在 折合 和 展开 操作 的 ， 这 样 的 操作 是 其 内 部 可 折 车 内 容 块 的 操作 。 

折合 组 通过 refresh() 方 法 刷新 其 内 容 ， 例 如 增加 一 个 新 的 折合 内 容 块 。 


员 应 式 设 计 


响应 式 设计 是 jQuery Mobile 1.3.0 开 始 支持 的 新 特性 , 用 于 在 不 同 分 辩 率 的 移动 设备 上 将 最 有 
价值 的 数据 以 良好 的 用 户 体验 呈现 出 来 。 当 屏幕 在 横 屏 和 竖 屏 中 切换 时 , 或 者 当 程序 运行 在 不 同 
分 辨 率 的 智能 手机 或 者 平板 电脑 时 ， 响 应 式 设 计 将 会 根据 视 口 尺寸 的 不 同 通过 HTML5 的 媒体 查 
询 技 术 加 载 不 同 的 CSS 定 义 而 呈现 出 不 同 的 用 户 界 面 。 

在 这 一 章 中 ， 我 们 将 会 了 解 到 : 

口 基于 jQuery Mobile 实 现 响应 式 设 计 ; 

口 分 栏 技术 ; 

口 回流 表格 (Reflow Table ); 

口 字段 切换 表格 ( Column-Toggle Table ); 

口 滑动 面板 ; 

口 文 持 触 控 操作 的 滑动 面板 。 


12.1 基于 jQuery Mobile 实现 响应 式 设计 


使 用 jQuery Mobile 实 现 响应 式 设计 时 ， 通 第 有 两 种 方法 ， 具 体 如 下 所 示 。 

口 基于 媒体 查询 技术 设置 折断 点 ， 在 不 同 的 折断 点 ( breakpoint ) 加 载 不 同 的 CSS 并 呈现 不 
同 的 用 户 界面 效果 ， 这 也 是 使 用 最 多 的 方法 。 

口 基于 jQuery Mobile 上 默认 设置 的 回流 表格 、 字 上段 切 换 表 格 和 滑动 面板 实现 啊 应 式 设计 。 

如 果 使 用 第 二 种 方法 ， 开 发 者 也 可 以 自 定 义 折 断 点 而 支持 更 定制 化 的 响应 式 设计 用 户 体验 。 


注意 为 实现 不 同 分 辩 率 下 响应 式 设计 的 界面 效果 ， 这 一 草 将 会 使 用 桌面 浏览 器 Google Chrome 
来 演示 执行 效果 ， 而 不 是 使 用 Android 模 拟 器 。 在 实际 开发 中 ， 开 发 者 也 可 以 首先 在 桌面 
浏览 器 调试 通过 之 后 ， 再 在 移动 设备 浏览 器 中 执行 响应 式 设 计 的 程序 。 


基于 媒体 查询 技术 的 折断 点 技术 实现 响应 式 设计 已 经 在 桌面 浏览 器 开发 中 被 广泛 使 用 了 , 大 
致 的 实现 过 程 如 下 所 示 。 
(1) 定义 CSS 的 媒体 查询 和 折断 点 。 
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(2) 通过 流 式 分 柱 布 局 或 者 页 面 元 素 进 行 呈 现 。 

(3) 在 不 同 的 媒体 查询 设置 中 ， 使 用 不 同 的 图 片 和 文字 定义 。 

不 管 使 用 哪 种 方法 实现 啊 应 式 设 计 , 开发 者 都 需要 投入 更 多 精力 在 不 同 分 辨 率 的 设备 中 进行 
测试 。 例 如 , 字体 在 高 分 辨 率 屏 幕 和 普通 移动 设备 屏幕 中 是 否 都 显示 正常 ,排版 和 布局 在 水 平方 
回 和 竺 直方 向 上 是 否 都 执行 正 ， 等 等 。 

通常 ， 开 发 者 在 设计 之 初 需要 考虑 到 这 样 一 些 细 市 。 

口 如 果 在 页 面 中 使 用 媒体 查询 技术 ， 并 根据 移动 设备 分 辨 率 的 不 同 而 设置 不 同 的 折断 点 ， 
那么 折断 点 的 设置 通常 需要 放 在 jQuery Mobile 等 CSS 之 后 ， 否 则 将 可 能 会 不 起 作用 。 

口 需要 根据 相对 长 度 单位 em 而 不 是 根据 像 叉 设置 截断 点 。 一 些 移动 设备 分 辩 率 非常 高 ， 而 
有 的 则 没有 那么 局 ， 如 采 按 照 像 素 设 置 折 断 点 ， 则 可 能 在 高 分 辨 率 移 动 设 备 下 ， 用 户 界 
面 旦 现 异常 ， 所 以 需要 使 用 相对 长 度 。 

口 设置 截断 点 的 时 候 ， 不 但 需要 考虑 移动 设备 的 分 辨 率 ， 更 需要 考虑 内 容 所 占 的 尺寸 。 例 
如 在 分 栏 的 时 候 ， 如 果 分 柱 的 div 设 置 不 够 高 而 内 容 很 多 ， 则 在 一 些 移动 设备 分 辨 率 下 ， 
可 能 出 现 各 个 div 的 高 度 参差 不 齐 。 所 以 ， 如 果 内 容 文字 较 多 ， 则 需要 根据 内 容 篇 幅 考 虑 
div 所 占 的 高 度 ， 以 保证 界面 呈现 效果 。 

口 从 低 分 辩 率 的 移动 设备 开始 设计 ， 通 常 更 容易 设计 莱 容 性 高 的 用 户 界 面 。 如 果 低 分 立 率 
下 能 呈现 正常 ， 通 常 高 分 辨 率 下 也 没有 问题 。 也 正 因 为 这 样 ， 在 大 多 数 媒 体 查询 的 CSS 
设计 中 ， 建 议 折断 点 要 基于 min-width 参 数 进行 设置 。 

口 对 于 文 持 多 语言 的 场景 ， 不 同 字 体 的 尺寸 是 不 同 的 。 例 如 ， 在 同样 的 内 容 下 ， 中 文 所 占 
的 篇 幅 比 英文 小 。 如 果 使 用 相同 的 CSS 设 置 和 折断 点 设置 ， 则 可 能 英文 下 显示 整齐 ,而 中 
文 环境 下 却 显得 松 松 垮 垮 ,或 者 中 文 下 显示 整齐 ， 而 英文 下 却 参差 不 齐 。 为 此 ， 有 可 能 
震 要 根据 不 同 语种 设计 不 同 的 CSS。 这 虽然 并 不 是 严格 意义 上 的 啊 应 陈设 计 的 讨论 范畴 ， 
但 是 却 影 响 到 啊 应 式 设 计 的 折断 点 设置 等 细 方 的 用 户 界面 设计 。 


小 经 验 ”由 于 响应 式 设 计 需 要 能 够 支持 多 种 不 同 的 分 辨 率 环境 ， 如 果 直 接 在 移动 设备 浏览 器 上 
进行 调试 ， 成 本 会 很 大 。 开 发 者 可 以 首先 在 果 面 浏览 器 〈 例 如 Firefox ) 中 调试 完成 ， 
然后 在 移动 设备 浏览 器 中 进行 集成 和 测试 。 


12.2 分 栏 技 术 


在 jQuery Mobile 1.3.0 出 现 之 前 , 实现 的 分 栏 页 面 通常 具有 固定 的 栏 数 。 在 jQuery Mobile 1.3.0 
之 后 ,可 以 根据 移动 设备 屏幕 分 辩 率 的 不 同 ， 通 过 设置 媒体 查询 的 折断 点 ， 实 现 响应 式 设 计 的 分 12 
栏 界面 。 

在 图 12-1 中 ， 我 们 分 别 旦 现 了 视 口 尺 寸 不 同 的 办 而 呈现 效果 。 信 得 指出 的 是 ， 这 些 界面 的 代 
码 都 是 同一 套 的 。 
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分 栏 布局 的 响应 -… 


在 响应 式 设计 的 分 栏 布局 中 ， 不 同 的 折断 点 宽度 
下 ， 所 使 用 的 栏目 宽度 、 布 局 以 及 字体 、 字 号 
颜色 都 是 可 以 定制 的 。 


、 


第 1 栏 
第 1 栏 的 内 容 


第 2 栏 
第 2 栏 的 内 容 


第 4 栏 
第 4 栏 的 内 容 


分 栏 布 局 的 响应 式 设计 
在 响应 式 设计 的 分 栏 布局 中 ， 不 同 的 折断 点 宽度 下 ， 所 使 用 的 栏目 宽度 、 布 局 以 及 字体 、 字 号 、 颜 色 都 是 可 以 定制 的 。 


第 1 栏 


第 1 栏 的 内 容 


第 2 栏 第 3 栏 第 4 栏 
第 2 栏 的 内 容 第 3 栏 的 内 容 第 4 栏 的 内 容 


分 栏 布局 的 响应 式 设计 


在 响应 式 设计 的 分 栏 布局 中 ,不同 的 折断 点 宽度 下 ， 所 使 用 的 栏目 宽度 、 布 局 以 及 字体 、 字 号 、 颜 色 都 是 可 以 定制 的 。 


第 1 栏 第 2 栏 第 3 栏 第 4 栏 
第 1 栏 的 内 容 第 2 栏 的 内 容 。 第 3 性 的 内 容 。 第 4 栏 的 内 容 


分 栏 布局 的 响应 式 设计 


在 响应 式 设计 的 分 栏 布 局 中 ， 不 同 的 折断 点 宽度 下 ， 所 使 用 的 栏目 宽度 、 布 局 以 及 字体 、 字 号 、 颜 色 都 是 可 以 定制 的 。 


第 1 栏 第 2 栏 。 第 3 栏 第 4 栏 


第 1 栏 的 内 容 第 2 栏 的 内 第 3 栏 的 内 ”第 4 栏 的 内 
容 2 容 


C4 


图 12-1 啊 应 式 设 计 的 分 栏 技术 呈现 效 末 
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在 图 12-1 中 ， 当 视 口 尺寸 最 小 的 时 候 ， 各 个 分 栏 的 内 容 从 上 而 下 依次 排 开 。 当 视 口 尺寸 略 大 
一 些 时 ,第 一 个 分 栏 独立 一 行 ， 而 其 余 分 栏 排 列 在 第 二 行 。 当 视 口 尺寸 再 大 时 ， 则 一 行 之 中 水 平 
排列 了 4 个 分 栏 。 随 春 页 面 的 视 口 太 才 继续 增 大 ， 布 局 没有 发 生变 化 ， 但 是 各 个 分 栏 中 的 文字 矿 
才 比 之 前 大 了 很 多 。 这 是 一 种 典型 的 设计 : 随 着 视 口 民 寸 的 变化 ,界面 也 会 发 生 相 应 的 变化 。 在 
不 同 的 视 口 尺寸 下 ， 用 户 界 面 呈现 不 同 的 分 栏 布局 ， 字 号 也 随 之 改变 。 
在 实现 这 样 的 分 栏 设 计时 , 需要 根据 不 同 的 视 口 尺 寸 定义 不 同 的 折断 点 以 及 相应 的 各 个 分 栏 
所 占 的 宫 度 。 当 一 行 占 满 的 时 候 ， 目 然而 然 忆 用 下 一 行 ， 这 就 实现 了 不 同 的 分 栏 效 果 。 
以 图 12-1 中 第 二 个 呈现 界面 为 例 ， 媒 体 查 询 的 折断 点 设置 为 min-width: 24em， 其 中 的 CSS 设 
置 如 下 : 
/* 最 小 宽度 为 24em 的 时 候 ， 使 用 这 部 分 C55 设 定 */ 
@media all and (min-width: 24em) { 
.responsive-grids div { 
min-height: 7enm; 


} 


.responsive-grids .ui-block-b, .responsive-grids .ui-block-c, .responsive-grids .ui-block-d { 
float: left; 

width: 33.2%; 

} 

.responsive-grids .ui-block-b p, .responsive-grids .ui-block-c p, .responsive-grids .ui-block-c p { 
font-size: .5em; 

} 

} 


下 面 大 概 解释 一 下 这 段 CSS 的 定义 。 

口 分 栏 的 最 小 高 度 为 7em。 

口 第 一 行 分 栏 ui-block-a 的 宽度 为 默认 宽度 100%。 

口 第 二 行 分 栏 为 ui-block-b、ui-block-c 和 ui-block-d, 各 个 分 栏 的 宽度 为 33.2%。 正好 这 三 

个 排列 在 一 起 ， 大 致 为 屏幕 的 全 部 宽度 。 

口 文字 尺寸 略 小 。 

其 他 折断 点 下 的 CSS 设 置 与 这 个 大 臻 相当。 只 是 在 视 口 最 小 的 时 候 ， 建 议 将 所 有 分 栏 明确 设 
置 为 宽度 100%， 这 样 能 确保 显示 和 布局 正确 。 

完整 的 啊 应 式 设 计 的 分 栏 技术 呈现 代码 如 代码 清单 12-1 所 示 。 


代码 清单 12-1 啊 应 式 设 计 的 分 栏 技 术 


《!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<style> 
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.responsive-grids div { 
text-align: left; 
border-color: #ddd; 
} 
.responsive-grids p { 
color: #777; 
line-height: 140% 
} 
/* Stack all blocks to start */ 
.responsive-grids .ui-block-a, .responsive-grids .ui-block-b, .responsive-grids 
.Ui-block-c .responsive-grids .ui-block-d { 
width: 100%; 
float: none; 
} 
.responsive-grids .ui-block-b, .responsive-grids .ui-block-c, .responsive-grids 
.Ui-block-d { 
float: left; 
width: 100%; 


} 


/* 最 小 宽度 为 24em 的 时 候 ， 使 用 这 部 分 C55 设 定 */ 
@media all and (min-width: 24em) { 
.responsive-grids div { 
min-height: 7enm; 
} 
.responsive-grids .ui-block-b, .responsive-grids .ui-block-c, .responsive-grids 
.Ui-block-d { 
float: left; 
width: 33.2%; 
} 
.responsive-grids .ui-block-b p, .responsive-grids .ui-block-c p， 
.responsive-grids .ui-block-c p { 
font-size: .5em; 
} 
} 


/* 最 小 宽度 为 55em 的 时 候 ， 使 用 这 部 分 CSS 设 定 */ 
@media all and (min-width: 55em) { 
.responsive-grids div { 
min-height: 7enm; 
} 
.responsive-grids .ui-block-a, .responsive-grids .ui-block-c { 
float: left; 
width: 48.95%; 
} 
.responsive-grids .ui-block-b, .responsive-grids .ui-block-c, .responsive-grids 
.Ui-block-d { 
float: left; 
width: 12.925%; 
} 
} 


/* 最 小 宽度 为 68em 的 时 候 ， 使 用 这 部 分 CSS 设 定 ， 此 时 文字 变 大 了 */ 
@media all and (min-width: 68em) { 
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.responsive-grids { 
font-size: 125%; 

} 

.responsive-grids .ui-block-a, .responsive-grids .ui-block-c { 
float: left; 
width: 48.95%; 

} 

.responsive-grids .ui-block-b, .responsive-grids .ui-block-c, .responsive-grids 
.Ui-block-d { 
float: left; 
width: 12.925%; 

} 


} 
</style> 
</head> 
<body> 
<section id= MainPage” data-role="page” data-title=" 分 栏 布局 的 响应 式 设计 "> 
<header data-role="header"> 
<h1> 分 栏 布局 的 响应 式 设计 </h1> 
</header> 
<div class="content”data-role="content"> 在 响应 式 设 计 的 分 栏 布 局 中 ， 不 同 的 折断 点 宽度 下 ， 
所 使 用 的 栏目 宽度 、 布 局 以 及 字体 、 字 号 、 闫 色 都 是 可 以 定制 的 。 
<div style="height:15px;"></div> 
<div class="responsive-grids"> 
<div class="ui-block-a"> 
<div class="ui-body ui-body-c"> 
<h1> 第 1 栏 </h1> 
第 1 栏 的 内 容 
</div> 
</div> 
<div class="ui-block-b"> 
<div class="uUi-body ui-body-c"> 
<h2> 第 2 栏 </h2> 
第 2 栏 的 内 容 
</div> 
</div> 
<div class= "ui-block-c"> 
<div class="Ui-body ui-body-c"> 
<h3> 第 3 栏 </h3> 
第 3 栏 的 内 容 
</div> 
</div> 
<div class= "ui-block-d > 
<div class="Ui-body ui-body-c"> 
<h4> 第 4 栏 </h4> 
第 4 栏 的 内 容 
</div> 
</div> 
</divy> 
</div> 
<«/section> 
</body> 
</html> 
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注意 ”响应 式 设计 的 CSS 定 义 需 要 在 页 面 各 个 CSS 库 ( 特别 是 jQuery Mobile 库 ) 之 后 定义 ， 否 则 可 
能 会 不 生效 ,开发 者 需要 小 心 党 试 不 同 的 视 口 尺 寸 , 以 确定 分 栏 的 最 小 高 度 的 设置 是 否 正 确 。 


12.3 回流 表格 


在 使 用 HTML5 之 前 ， 前 端 设计 师 往 往 会 尽量 避免 页 面 出 现 回流 (reflow ) 和 重 绘 (repaint ) 
的 情况 。 因 为 回流 和 重 绘 很 可 能 导致 页 面 呈 现 速度 变 慢 ， 并 影响 用 户 体 验 。 而 在 基于 HTMLS 的 
jQuery Mobile 应 用 开发 中 ， 回 流 技术 已 成 为 一 种 啊 应 式 设 计 方法 。 

基于 回流 所 绘制 的 表格 ， 当 视 口 尺寸 比较 宽 的 时 候 , 表格 所 有 的 字段 从 左 到 右 依次 排列 。 而 当 
视 口 尺寸 比较 小 的 时 候 ,各 个 字段 则 变 为 从 上 到 下 依次 排列 ,这 种 变化 也 是 一 种 表格 的 响应 式 设计 。 

在 图 12-2 中 ， 左 图 是 视 口 尺寸 较 宽 时 的 界面 呈现 效果 ， 右 图 是 视 口 较 罕 时 的 呈现 效果 。 


响应 式 设计 之 表格 响应 式 设计 .… 


# 营销 系列 ”展示 率 点 击 ”费用 
1 广告 系列 A 1,000 10 $10.00 | 
2 广告 系列 B 500 9 $6.00 a 
E 营销 系列 ”广告 系列 A 
3 广告 系列 D 4000 90 $89.00 
展示 率 1,000 
4 广告 系列 F 60.000 1.500 $980.00 
点 击 10 
费用 $10.00 
= 2 


营销 系列 。 广告 系列 B 


Fe 一 去 cAN 


图 12-2 不 同 视 口 宽度 下 的 回流 表格 呈现 效果 


实现 回流 表格 的 方法 非常 简单 : 在 表格 声明 中 设置 data-role 为 table，data-mode 属 性 为 
reflow， 并 设置 class 为 ui-responsive 就 可 以 了 。 
图 12-2 的 实现 代码 可 参见 代码 清单 12-2。 


代码 清单 12-2 ”回流 表格 


<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke"> 
<thead> 
<tr> 
<th data-priority="1"><abbr title=" 营 销 系 列 编号 ">#</abbr></th> 
<th data-priority="persist"> 营 销 系 列 </th> 
<th data-pTriority="2"> 展 示 率 /th> 
<th data-priority="3"> 点 击 </th> 
<th data-priority="4"> 费 用 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
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<th>1</th> 
<td> 广 告 系列 A</td> 
<td>1,000</td> 
<td>10</td> 
<td>$10.00</td> 

</tr> 

<tr> 
<th>2</th> 
<td> 广 告 系列 B</td> 
<td>500</td> 
<td>9</td> 
<td>$6 .00</tdy> 

</tr> 

<tr> 
<th>3</th> 
<td> 广 告 系 列 D</td> 
<td>4,000</td> 
<td>90</td> 
<td>$89.00</td> 

</tr> 

<tr> 
<th>4</th> 
<td> 广 告 系列 F</td> 
<td>60 ,000</td> 
<td>1,500</td> 
<td>$980.00</td> 

</tr> 

</tbody> 
</table> 


12.4 字段 切换 表格 


当 在 移动 设备 浏览 希 中 呈现 字段 切换 表格 时 ，jQuery Mobile 会 检查 视 口 的 尺寸 。 如 果 尺 寸 较 
大 ， 则 可 以 呈现 表格 的 所 有 字段 。 如 采 故 寸 较 小 ， 则 会 呈现 局 优先 级 的 字段 ， 而 目 动 隐藏 低 优先 
级 的 字段 。 能 够 目 动 根据 视 口 人 寸 而 选择 显示 或 隐藏 表格 子 段 ,是 字段 切换 表格 的 主要 特点 。 图 
12-3 是 不 同 视 口 太 十 下 字段 切换 表格 的 呈现 效 来 ， 左 图 的 视 口 宽 度 较 宽 ， 而 右 图 较 罕 。 


响应 式 设计 之 .… 
响应 式 设计 之 表格 
Columns... 


Columns... 营销 系列 

# 营销 系列 展示 率 je 费用 广告 系列 A 

生 系 万 
1 广告 系列 A 1.000 10 $10.00 告 系列 B 
2 广告 系列 B 500 9 $6.00 re 

广告 系列 D 
3 广告 系列 D 4000 90 $89 .00 

广告 系列 F 

4 广告 系列 F 60 .000 1.500 $980.00 


图 12-3 ”字段 切换 表格 
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在 使 用 字段 切换 表格 时 ， 表 格 右 上 角 有 一 个 用 于 选择 字段 的 Columns 菜 单 ， 如 果 有 字段 被 隐 
藏 起 来 ， 点 击 这 个 按钮 即 可 在 琳 单 中 选择 再 次 显示 的 字段， 如 图 12-4 所 示 。 


啊 应 式 设 计 .… 啊 应 式 设 计 -… 


# 
Columns... 
营销 系列 
营 八 \ | = 一 AN | 未 这 
营销 系列 展示 率 = 销 系 列 展示 率 
广告 系列 A EE 1 广告 系列 A 1.000 
告 系列 B 2 广告 系列 B 500 
- 费用 z 

广告 系列 D 3 广告 系列 D 4.000 
广告 系列 F 4 广告 系列 F 60 000 


图 12-4 通过 Columns 菜 单 呈 现 隐藏 的 字段 


注意 ” 当 视 口 尺 寸 从 大 到 小 变化 时 ， 表 格 中 的 字段 会 被 自动 隐藏 掉 。 而 当 视 口 从 小 到 大 变化 的 
过 程 中 , 被 隐藏 的 字段 可 能 不 会 自动 显示 出 来 , 此 时 需要 手工 通过 Columns 菜 单 将 字段 呈 
现 出 来 ， 或 者 重新 刷新 浏览 器 将 其 呈现 出 来 。 


实现 字段 切换 表格 的 方法 非常 人 简单， 只 和 需要 在 表格 的 容 帮 中 声明 data-role 为 table， 
data-mode 为 columntoggle， 并 设置 class 为 ui-responsive 就 可 以 了 ， 相 关 代 人 码 如 下 : 


<table data-role="table" id="movie-table" data-mode= columntoggle” class="uvi-responsive table-stroke"> 


a 
12.5 ”滑动 面板 


通 前 ,jQuery Mobile 界 面 是 从 上 到 下 在 移动 设备 浏览 瘟 中 依次 排列 展开 的 ,滑动 面板 则 不 同 ， 
它 在 移动 设备 浏览 带 的 左 侧 或 者 右 侧 展开 。 使 用 者 可 以 在 滑动 面板 中 进行 操作 , 操作 完成 后 再 将 
消 动 面板 折合 回去 。 

消 动 面板 的 用 法 非 肖 类 似 于 对 话 框 , 我们 可 以 将 表单 、 列 表 、 有 琳 单 或 者 介绍 文子 集成 在 滑动 
面板 中 。 图 12-5 是 渭 动 面板 展开 和 关闭 时 的 呈现 效果 。 点 击 左 图 中 的 超级 链接 ， 滑动 面 板 从 屏 舌 
左 侧 弹 出 。 输 入 完 消 朋 并 点 击 “ 发 送 ” 按 钮 后 ， 滑 动 面板 再 次 关闭 起 来 。 
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发 消息 
点 击 打开 面板 按钮 ， 可 以 打开 面板 。 点 击 打开 面相 
打开 左 侧面 板 ， 发 送 消 息 。 Lu Ming 的 消息 . 


图 12-5 ”滑动 面板 旦 现 效 果 
实现 渭 动 面板 时 ， 和 需要 在 页面 中 加 入 滑动 面板 的 容 瘟 ， 如 下 所 示 : 


<div data-role="panel" id="sliding-panel"> 
《1-- 此 处 为 滑动 面板 的 内 容 --> 
</div> 


消 动 面板 古 一 个 独立 在 页 面 、 页 脚 和 正文 之 外 的 独立 容 瘟 。 值 得 注意 的 是 , 滑动 面板 的 容 冲 
可 以 写 在 页 面 开始 或 者 结束 的 位 置 ， 但 不 要 写 在 页 眉 、 正 文 或 者 页 脚 之 中 。 


如 末 要 打开 一 个 滑动 面板 ， 可 以 通过 超级 链接 或 者 超级 链接 按钮 来 实现 ， 例 如 : 
<a href="#message-panel"> 

打开 左 侧面 板 ， 发 送 消息 。 
</ay> 


如 果 要 在 程序 中 关闭 滑动 面板 ， 则 可 以 在 超级 链接 中 声明 data-rel 为 close 或 者 通过 
JavaScript 的 Close 方 法 来 关闭 。 例 如 ， 在 背 动 面板 内 部 关闭 滑动 面板 的 代码 是 这 样 的 : 
<a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true"> 
取消 
</ay> 


图 12-5 所 对 应 的 完整 的 滑动 面板 程序 如 代码 清单 12-3 所 示 。 
代码 清单 12-3 ”滑动 面板 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 


<link rel="stylesheet" href="../js/jqvery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
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<script src="../js/jqvery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 
<body> 
<Section id="MainPage” data-role="page” data-title=" 面 板 "> 
<header data-role="header"> 
<h1> 面 板 </h1> 
</header> 
<div class="content” data-role="content"> 点 击 打 开 面 板 按 钮 ， 可 以 打开 面板 。 
<div style="height:15px;" ></div> 
<a href="#message-panel"> 打 开 左 侧面 板 ， 发 送 消息 。</a> 《</div> 
<div data-role="panel" data-position-fixed="true" data-theme="a" 
<form class="userform"> 
<h2> 发 消息 </h2> 
<label for="name">Lu Ming 的 消息 :</1abel> 
<textarea cols="20" rows="10" name="message" id="message"></textarea> 
<div class="ui-grid-a"> 
<div class="ui-block-a"> 
<a href="#" data-rel="close" data-role="button" data-theme="c" 
取消 
</a> 
</div> 
<div class="ui-block-b"> 
<a href="#" data-rel="close" data-Tole= button” data-theme="b" data-mini= true > 
发 送 
</a> 
</div> 
</div> 
</form> 
</div> 
</section> 
</body> 
</html> 


12.6 ”支持 触 控 操作 的 滑动 面板 


通 浓 ,移动 设备 浏览 器 的 尺寸 有 限 , 而 有 的 内 容 却 很 长 ,这 时 如 果 需 要 在 页 面 中 找到 打开 或 
者 关闭 滑动 面板 的 按钮 , 用 户 将 可 能 需要 翻 屏 好 几 次 才能 定位 到 。 如 果 可 以 使 用 横 癌 的 轻 扫 屏 闫 
将 滑动 面板 调 出 来 ， 将 会 方便 使 用 者 操作 。 

在 jQuery Mobile 中 ,横向 轻 扫 可 以 使 用 swiperight 或 者 swipeleft 事 件 实现 。 当 事件 触发 的 时 
候 , 调用 相应 面板 的 open 函 数 ,， 就 可 以 打开 这 个 滑动 面板 了 。 这 个 实现 方法 的 JavaScript 代 码 片段 
如 代码 清单 12-4 所 示 。 


代码 清单 12-4 ”滑动 面板 
<script type= text/javascript'> 
$('#Mainpage' ).live('swiperight', function(){ 
$('#message-panel' ).panel('open' ); 
}); 


</script> 


1d= message-panel > 


data- mini="true"> 


主题 风格 卖 化 


在 jQuery Mobile 中 ， 我 们 可 以 对 页 面 样式 和 页 面 中 的 工具 栏 、 按 钮 、 表 单元 素 、 列 表 进 行 颜 
色 设 定 。jQuery Mobile 默 认 内 置 了 5 种 不 同 的 配色 色 版 ， 开 发 者 也 可 以 通过 ThemeRoller 定 义 适合 
目 己 应 用 程序 的 页 面 主题 风格 。 

在 这 一 草 中 ， 我 们 将 接触 到 : 

口 主题 与 色 版 ; 

口 内 置 色 版 ; 

口 通过 ThemeRoller 月 定义 主题 ; 

口 高 级 开发 技术 。 


13.1 主题 与 色 版 


在 jQuery Mobile 中 ,我 们 可 以 通过 定义 主题 风格 来 定义 界面 样式 。 主 题 通常 包括 界面 元 条 样 
式 以 及 色 版 配色 方案 。 

基于 jQuery Mobile 开 发 移动 应 用 时 ,我 们 可 以 设置 特定 的 界面 元 又 样 式 , 例如 某 个 界面 元 系 
的 尺寸 ， 将 其 边框 设置 为 在 角 和 矩形 边框 或 者 圆 角 矩形 边框 等 。 而 色 版 用 于 配置 界面 元 素 的 配色 。 

对 jQuery Mobile 应 用 进行 个 性 化 界面 设计 时 ， 大 多 情况 下 就 是 进行 主题 和 人 色 版 的 个 性 化 设 
置 ， 除 非 涉 及 啊 应 式 设 计 或 一 些 特 殊 的 用 户 界 面 个 性 化 场景 。 在 色 版 之 外 ,对 于 主题 的 定义 通 靖 
是 字体 ,激活 状态 的 文字 、 边 界 和 背景 设置 ， 圆 角 和 矩形 按钮 或 分 组 的 边框 样式 ， 图标 样 式 和 阴影 
Ns 

通常 ，jQuery Mobile 的 内 置 主题 样式 和 人 色 版 一 起 保存 在 层 车 样式 表 中 。 下 面 的 代码 将 jQuery 
Mobile 上 默认 的 层 辣 样式 表 引 入 页 面 中 : 


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 


小 经 验 为 了 提升 用 户 访问 速度 , 我 们 建议 将 CSS 文 件 、JavaScript 文 件 和 资源 图 片 存储 在 国内 服 
务 器 上 。 此 外 ， 最 好 同时 采购 和 配置 CDN 服 务 ， 这 样 打 开 应 用 的 速度 将 会 更 快 。 
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13.2 内置 色 版 


在 jQuery Mobile 中 ， 默 认 的 层 芭 样式 表 内 置 了 5 种 不 同 的 色 版 。 对 于 不 同 的 页 面 元 素 ， 我 们 
可 以 通过 设置 不 同 的 色 版 来 改变 样式 。 

图 13-1 分 别 为 色 版 a 和 色 版 c 的 呈现 效果 , 两 张 截屏 同 为 登录 界面 , 左 图 采用 色 版 4 作为 页 面 的 
色 版 ， 而 右 图 采用 色 版 <。 色 版 设置 不 同 ， 界 面 元 素 的 外 形 、 尺 寸 等 不 变 , 但 是 颜色 发 生 了 很 大 


变化 。 


图 13-1 左 图 使 用 色 版 4*， 右 图 使 用 色 版 c 


这 是 左 图 色 版 设置 的 代码 片段 : 


<section id="MainPage” data-role="page ”data-title=" 登 录 表 单 ”data-theme="a"> 
《1- 这 里 加 入 登录 表单 --> 
</section> 


右 图 和 左 图 代码 中 的 唯一 不 同 在 于 data-theme 属 性 的 设 定 ， 右 图 中 将 该 属性 设 定 为 色 版 c， 
相关 代码 如 下 : 


《Section id="MainPage” data-role="page ”data-title=" 登 录 表 单 ”data-theme="c"> 
《1- 这 里 加 入 登录 表单 --> 
</section> 


由 于 page 容 姨 的 色 版 发 生变 化 ， 其 中 的 工具 栏 、 输 入 框 、 按 钮 的 配色 都 随 之 改变 。 可 见 ， 父 
级 容 天 中 色 版 的 变化 将 对 界面 主题 样式 产生 直接 影 啊 。 

在 jQuery Mobile 中， 默认 色 版 定义 可 以 自 a 到 e， 共 有 5 种 不 同 的 样式 。 开 发 者 可 以 自行 书写 
代码 以 测试 ， 在 此 不 再 获 述 。 

通常 ,我 们 可 以 目 定 义 页面 元 素 所 使 用 的 色 版 。 如 果 没 有 目 定 义 的 色 版 , 则 会 取 自 上 一 级 容 
器 的 色 版 。 在 第 10 章 的 登录 界面 中 ,“ 提 交 ” 与 “取消 ”按钮 使 用 了 不 同 的 颜色 便 是 基于 此 ， 如 
图 13-2 所 示 。 


13.3 ”通过 ThemeRoller 自 定义 主题 235 


图 13-2 通过 data-theme 属 性 设 定 按钮 主题 


设置 特定 的 data-theme 样 式 之 后 ， 其 主题 配色 将 不 再 继承 目 父 级 容 各 ,而 是 用 日 定义 的 配色 
样式 。 在 代码 清单 13-1 中 ,“ 取 消 ” 按 钮 使 用 了 data-theme 为 4 的 主题 风格 , 按钮 颜色 为 白 底 黑 字 ， 
“提交 ”按钮 使 用 了 data-theme 为 a 的 主题 风格 ， 按 钮 颜色 为 黑 撒 日 字 。 


代码 清单 13-1 ”设置 表单 元 系 的 主题 


<fieldset class="ui-grid-a"> 
<div class="vui-block-a"> 
<button type="reset"” data-theme="d"> 取 消 </button> 
</div> 
<div class="ui-block-b"> 
<button type="submit"” data-theme="a"> 提 交 </button> 
</div> 
</fieldset> 


除了 按钮 之 外 ,其 他 的 表单 元 素 ( 比如 工具 栏 和 列表 ) 等 均 可 以 通过 设置 主题 样式 而 设 定 不 
同 的 颜色 。 


13.3 ”通过 ThemeRoller 目 定 义 主 题 


很 多 场合 下 , 开发 者 布 望 根据 日 己 产 品 的 需要 为 移动 应 用 定制 个 性 化 的 配色 方案 。 如 有 果 开 发 
者 目 己 开发 这 样 的 主题 和 色 厂 , 将 会 是 一 件 非 常 耗 时 的 工作 , 而 jQuery Mobile 提 供 了 ThemeRoller 
工具 ， 这 个 工具 能 够 帮助 开发 者 快速 定义 26 种 色 版 ， 以 适应 不 同 的 应 用 场景 。 


13.3.1 ThemeRoller 的 基本 概念 


ThemeRoller( 如 图 13-3 所 示 ) 是 一 个 在 线 服务 , 开发 者 可 以 在 线 进 行 jQuery Mobile 色 版 定制 、 
阅 吃 、 下 载 与 分 吝 ， 也 可 以 将 开发 完成 的 色 版 文件 叶 入 到 ThemeRoller 以 进行 青 编 辑 。 


230 第 13 章 主题 风格 美化 


ste [sg 


Yent below o 


center 


rag a color onto an elem rpickfromthe (Wy Adobe Kuler swatche colors,.. 
| | | 四 古国 本 四 | | IEEL | | | | | 四 四 | &3J/QuerY 
上 Font Family LIGHTNESS © SATURATION © 
» Active State 
上 Corner Radii > 
有 A 4 有 B 全 C 
» lcon 
» BoxShadow 
Sample text and links Sample text and links Sample text and links 
List Header List Header List Header 
Read-only list item Read-only list item Read-only list item 
Linked list item © Linked list item Linked list item 
© Radio © Radio © Radio 
Checkbox Checkbox Checkbox 
Option 1 Option 1 Option 1 地 
Text Input Text Input Text Input 
50 La 50 my 50 Cm 
Button © Button © Button 


图 13-3 ThemeRoller 


在 使 用 ThemeRoller 进 行 界面 定义 的 时 候 ， 首 先 需 要 注意 所 使 用 的 jQuery Mobile 版 本 号 。 在 
ThemeRoller 上 方 ， 有 选择 jQuery Mobile 版 本 的 下 拉 列 表 ， 如 图 13-4 所 示 。 这 里 需要 说 明 的 是 ， 
ThemeRoller 中 jQuery Mobile 的 版 本 号 需要 和 生产 系统 中 的 jQuery Mobile 版 本 号 一 致 。 如 果 开 发 者 
使 用 jQuery Mobile 1.1.0 版 本 ， 则 在 ThemeRoller 中 选择 Version 1.1.0。 


让 below or pick from the 


个 WE Recent Colors colors,.,. 
加 eA jQUerv 
| SATURATION @ 
Ia @ © B @ © C 
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图 13-4 ”jQuery Mobile 版 本 下 拉 列 表 
在 ThemeRoller 界 面 中 ， 主 要 由 4 部 分 组 成 ， 具 体 如 表 13-1 所 示 。 


表 13-1 ThemeRoller 的 界面 布局 
布 局 功 能 


位 于 ThemeRoller 最 上 方 ， 用 于 实现 版 本 号 选择 、 恢 复 与 重 做 ， 打 开 与 关闭 Inspector， 下 载 
主题 文件 ， 导 入 主题 文件 ， 分 享 自 定义 主题 链接 与 帮助 功能 
位 于 图 13-3 屏 幕 左 侧 ， 用 于 实现 全 局 设置 和 特定 色 版 设置 


检查 窗 格 (Inspector) 


QuickSwatch 栏 位 于 图 13-3 中 屏幕 右 侧 功能 按钮 和 预览 窗 格 之 间 ， 用 于 将 颜色 拖 昌 到 特定 页 面 元 素 ， 实 现 
快速 设置 色 版 的 功能 
预 宽 窗 格 图 13-3 中 屏 磋 右 侧 大 片区 域 ， 默认 包含 了 3 个 移动 应 用 界面 ， 预 览 所 设 定 主 题 风 格 的 呈现 


样式 
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13.3.2 ”编辑 全 局 设置 与 色 版 


在 检查 窗 格 部 分 ， 可 以 进行 主题 的 全 局 设置 和 特定 色 版 的 设置 ， 如 图 13-5 所 示 。 


ThemeRoller etel [es 
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图 13-5 左 图 为 全 局 设置 ， 右 图 为 色 版 4 的 设置 


通过 全 局 设置 ， 我 们 可 以 设置 : 

口 字体 ; 

口 激活 状态 ， 例 如 文学 颜色、 阴影 效果 、 背 景 闫 色 和 边框 闫 色 等 ; 

口 圆 角 设置 ， 例 如 分 组 和 按钮 的 加 角 尺 十; 

口 图 标 样式 ; 

口 阴影 。 

在 jQuery Mobile 中 ， 默 认 包 含 了 5$ 种 不 同 的 色 版 ， 分 别 以 a 至 e 来 表示 。 通 过 ThemeRoller， 我 
们 可 以 自 定义 26 种 色 版 ,分 别 通过 a 至 z 来 表示 。 

点 击 检查 窗 格 右 侧 的 + 按钮 ， 或 者 在 预览 窗 格 中 点 击 Add swatch... 按 钮 ， 则 可 以 添加 新 的 色 
版 。 检 查 窗 格 上 的 色 版 A、B、C、D…… 分 别 对 应 到 程序 中 所 使 用 的 色 版 定义 。 例 如 ， 在 页 面 中 
加 载 目 定义 色 版 F 中 的 样式 的 代码 如 代码 清单 13-2 所 示 。 
代码 清单 13-2 设 定 目 定义 风格 

<Section id="Mainpage”data-role="page” data-title=" 登 录 表 单 ”data-theme="f"> 


《1-- 这 里 是 页 面 内 容 --> 
</section> 
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当 一 个 色 版 定义 完成 后 , 我 们 希望 复制 当前 色 版 并 在 当前 色 版 的 基础 上 开发 新 的 色 版 ,此 时 
直接 点 击 色 版 上 方 的 Duplicate 链 接 即 可 。 

如 采 需 要 删除 当前 色 版 ， 则 点 击 Delete 链 接 即 可 。 

基于 ThemeRoller 进 行 色 版 设计 ， 可 以 定义 这 样 一 些 内 容 

口 页 眉 和 页 脚 ; 

口 页 面 内 容 ; 

口 按钮 样式 。 

jQuery Mobile 初 学 者 在 色 版 开发 中 往往 容易 混 消 全 局 设置 和 特定 色 版 设置 , 这 是 因为 它们 都 
有 关于 一 些 特定 界面 颜色 的 设置 。 如 果 设 置 错误 ， 可 以 使 用 功能 按钮 中 的 undo 恢 复 之 前 的 操作 。 


13.3.3 导入、 下 载 和 分 享 自 定义 色 版 
对 编辑 完 的 色 版 进行 再 次 编辑 , 可 以 将 主题 CSS 文 件 导 和 人 到 ThemeRoller 中 进行 ,编辑 完成 后 ， 
我 们 可 以 直接 将 其 下 载 到 本 地 。 


点 击 Import or upgrade 按 钮 ， 在 打开 的 Import Theme 对 话 框 中 将 之 前 定义 好 的 色 版 CSS 内 容 复 
制 到 对 话 框 中 ， 然 后 点 击 Import 按 钮 以 实现 导 和 人 操作， 如 图 13-6 所 示 。 
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图 13-6 ”Import Theme 对 话 框 


图 13-7 是 将 jQuery Mobile 默 认 的 主题 定义 文件 导入 到 ThemeRoller 后 的 界面 。 
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图 13-7 ”导入 坎 认 主题 样式 的 效 末 


完成 色 版 设置 后 ， 可 以 在 ThemeRoller 的 下 和 载 界 面 中 ， 输 入 Theme Name 后 ， 将 其 打包 为 ZIP 
格式 下 载 ， 如 图 13-8 所 示 。 


Download Theme Theme Name 
This will generate a Zip file that contains both a compressed (for production) and uncompressed (for editing) version of the theme. 
To use your theme, add it to the head of your page before the jquery.mobile.structure file, like this: 


IDOCTYEE html 
html 
Shead> 


Stlt1e>]Query Mo bile Pa ee title 
‘<meta charset= tf- 
meta Tame= yiewport” onte ent= eg device-width, initial-scale=1" 


《1ink rel styleshe hr pi custom-—theme. css” /> 
qi nk rel= stylLe et” ee ef= hy: ji code. Jquery. comimobile/l1.3.1/jquery.mobile. structure-l.3.1.min.: 
ript Sr ="http ji code. ] query. co er 9.1.min. ]s ?script 
cr src= "http:yreode. jquery. com/mobile/l1.3.1/jquery. mobile-1.3.1.min. js >/script 
:head; 


二 二 Tip:To edit your theme later, use the Import feature to paste in 
tthe uncompressed theme file Close Download zip 
™、 By 日 
图 13-8 ”下载 主题 


另外， 在 下 载 主题 的 界面 中 ，ThemeRoller 使 用 黄色 粗 体高 完 显 示 出 集成 定制 主题 层 攻 样式 
表 的 方法 。 需 要 注意 的 是 ， 在 使 用 自 定义 主题 时 ,一 定 要 引用 jquery.mobile.structure 这 个 层 著 样 
式 表 定 义 ， 示 例 代 码 如 代码 清单 13-3 所 示 。jquery.mobile.structure 这 个 层 羞 样式 表 文 件 是 jQuery 
Mobile 库 的 一 部 分 ， 可 以 在 下 载 的 jQuery Mobile 压 缩 文 件 中 找到 。 13 
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代码 清单 13-3 ”加 载 自 定 义 主题 


<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../css/themes/my-custom-theme.css” /> 
<link rel="stylesheet" href="../js/jquvery.mobile-1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
<script src="../js/jquery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.js"></script> 
</head> 


主题 的 设计 也 可 以 通过 超级 链接 进行 分 齐 。 点 击 Share 按 钮 ，ThemeRoller 将 会 保存 当前 主题 
的 设 定 ， 并 呈现 分 孚 链接 ， 而 开发 者 可 以 将 后 成 的 超级 链接 发 送 给 其 他 人 ， 如 图 13-9 所 示 。 接 收 
到 这 个 分 至 链接 并 打开 时 ，ThemeRoller 将 目 动 呈现 前 次 分 至 的 内 容 ， 而 接收 者 可 以 基于 这 样 的 
分 至 继续 进行 编辑 和 设计 。 


Share Theme 


| Important note: We can only store this theme URL on the server for 30 days, then it will be 
deleted. Download a theme to keep a copy safe that you can Impor later， Done 


图 13-9 ”分享 主题 


13.4 局 级 开发 技术 


在 进行 主题 开发 的 过 程 中 , 我 们 不 但 可 以 在 页 面 加 载 时 设 定 某 个 页 面 、 按 钮 或 表单 元 系 的 主 
题 样式 ， 也 可 以 通过 程序 设 定 它们 。 

除了 可 以 通过 data-theme 属 性 设 定 主 题 之 外 ，jQuery Mobile 还 提供 了 一 套 通 过 CSS 样 式 设 定 
主题 风格 的 方法 。 开 发 者 可 以 通过 声明 CSS 样 式 的 方式 设 定 页 面 和 页 面 元 素 的 主题 。 主 要 的 CSS 
样式 定义 如 表 13-2 所 示 。 


表 13-2 页面 主题 的 CSS 样 式 定 义 


CSS 属 性 功 能 
ui-bar-(a-z) 用 于 设 定 工具 栏 的 主题 风格 ， 例 如 ui-bar-a 
ui-body-(a-z) 用 于 设 定 页 面 和 页 面 元 素 的 主题 风格 ， 例 如 ui-body-a 
ui-btn-up-(a-z) 用 于 设 定 按钮 的 主题 风格 ， 例 如 ui-btn-up-a 
ui-corner-all 用 于 设 定 圆 角 和 矩形 边框 
ui-shadow 用 于 设 定 阴影 效 末 


人 用 于 设 定 为 禁用 效果 
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在 程序 执行 期 间 ， 动 态 调整 页 面 和 页 面 元 素 主题 设置 的 步骤 如 下 。 

(1) 获取 需要 调整 主题 设 定 的 DOM 对 象 以 及 这 个 DOM 对 象 当前 的 主题 设 定 。 
(2) 重新 设置 DOM 对 象 的 主题 ， 并 移 除 挥 CSS 样 式 中 当前 设置 的 色 版。 

(3) 添加 新 的 色 版 对 应 的 CSS 样 式 到 DOM 对 象 中 。 

(4) 通过 create 事 件 使 得 主题 设 定 与 CSS 样 式 设 定 生效 。 

实现 动态 调整 页 面 元 系 主 题 的 代码 片段 如 代码 清单 13-4 所 示 。 


代码 清单 13-4 ”动态 调整 页 面 元 素 主 题 


《!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title> 跨 平台 移动 应 用 </title> 
<link rel="stylesheet" href="../js/jqvuery.mobile-1.3.1/jquery.mobile-1.3.1.min.css" /> 
<script src="../js/jqvuery-1.7.1.min.js"></script> 
<script src="../js/jqvuery.mobile-1.3.1/jqvuery.mobile-1.3.1.min.js"></script> 
<script type="text/javascript"> 
function ChangeSwatche(targetSwatche) 
{ 
var targetDOM = $('#swatchDemo'); 
var currentSwatche = targetDOM.attr('data-theme'); 


targetDOM.attr('data-theme' ,targetSwatche).removeClass('ui-body-'+currentSwatche); 
targetDOM.addClass('ui-body-'+targetSwatche); 
targetDOM. trigger('create' ); 
} 
</script> 
</head> 
<body> 
<Section id="Mainpage”data-role="page”data-title=" 更 换 色 版 "> 
<header data-role="header"> 
<h1> 更 换 色 版 </h1> 
</header> 
<div class="content" data-role="content"> 
<form> 
<div data-role="fieldcontain"> 
<input type="text" name="swatchDemo" id="swatchDemo" 
value="”placeholder=" 更 换 色 版 "data-theme="e” /> 
<div style="margin-top:20px;” > 
<fieldset class="ui-grid-a"> 
<div class="vui-block-a"> 
<button type="button" onClick="return ChangeSwatche('a' );"> 
名 有 版 A 
</button> 
</div> 
<div class="vui-block-b"> 
<button type="button" onClick="return ChangeSwatche('c');"> 
色 县 ( 
</button> 
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</div> 
</fieldset> 
</div> 
</form> 
</div> 
</Sectiony> 
</body> 
</html> 
在 这 段 代码 中 ， 我 们 将 需要 设置 的 色 版 参数 传人 ChangeSwatche 消 数 中 。ChangeSwatche 也 数 


将 id 为 swatchDemo 的 文本 框 的 原 有 主题 设 定 移 除 挤 ， 再 设 定 新 的 主题 。 然 后 ， 通 过 触发 create 事 
件 使 得 新 设 定 的 主题 生效 。 实 现 效果 如 图 13-10 所 示 。 


图 13-10 左 图 为 “ 色 厂 A” 按 钮 按 下 时 的 效果 ， 右 图 为 “ 色 版 C” 按 钮 按 下 时 的 效果 


意 当 基 于 属性 或 选项 设 定 页 面 主题 时 ， 如 果 页 面 或 表单 元 素 不 声明 特定 的 主题 ， 则 会 继承 
父 级 容器 的 主题 。 例 如 ， 页 面 主题 为 e， 如 果 不 进行 特别 设 定 ， 则 页 面 中 所 有 元 素 的 主题 
均 为 e。 但 是 通过 JavaScript 进 行 设 定时 ， 当 父 级 容器 的 主题 被 重新 设 定 时 ， 其 内 部 所 包 
含 的 页 面 或 表单 元 素 并 不 会 一 起 更 改 ,除非 遍历 所 有 页 面 或 表单 元 素 逐 一 重新 设 定 主题 。 


JavaScript 测 试 自 动 化 


基于 测试 驱动 开发 和 测试 目 动 化 技术 开展 测试 活动 , 将 有 助 于 快速 稳定 产品 质量 , 改善 产品 
发 布 殖 率 ， 从 而 缩短 产品 开发 周期 ， 降 低 开 发 成 本 。 使 用 jQuery Mobile 开 发 的 移动 应 用 基于 移动 
设备 浏览 人 钵 和 晶 面 浏览 希 环 境 来 运行 ,而 大 多 数 的 JavaScript 测 试 目 动 化 工具 基于 喝 面 浏览 亏 来 运 
行 ， 所 以 ,开发 者 可 以 将 jQuery Mobile 应 用 首先 运行 在 梨 面 训 览 需 中 ,， 通 过目 动 化 技术 保证 程序 
运行 良好 ， 然 后 再 在 移动 设备 中 进一步 测试 ， 这 样 整体 的 测试 成 本 将 会 更 低 ， 歼 率 更 高 。 

在 这 一 草 中 ， 我 们 将 接触 到 : 

口 基于 QUnit 开 发 JavaScript 测 试 驱 动 ; 

口 QUnit 源 言 ; 

口 其 他 测试 技术 。 


A.1 基于 QUnit 开发 JavaScript 测试 驱动 


测试 驱动 是 通过 测试 来 推动 软件 开发 活动 开展 的 一 种 实践 方法 ,能够 帮助 开发 者 更 加 聚焦 于 
所 要 实现 的 功能 而 减少 项 目 “ 镀 金 ”, 可 以 帮助 开发 者 从 多 种 角度 对 所 需要 开发 的 模块 开展 思辨 ， 
完善 设计 ， 以 达到 完善 开发 交付 物 的 目的 。 在 以 极限 编程 为 代表 的 敏捷 软件 开发 中 , 测试 驱动 是 

-种 旨 在 提升 软件 质量 、 改 善 质量 成 本 结构 的 最 佳 实践 。 

通常 ， 在 测试 驱动 开发 中 ， 工 程 师 在 开发 一 个 应 用 模块 之 前 ， 先 基于 设计 开发 测试 程序 ， 青 
通过 编码 使 得 开发 的 模块 通过 测试 驱动 测试 。 

QUnit 是 一 种 面 癌 JavaScript 的 测试 驱动 框 染 ， 使 用 它 ， 开 发 人 员 可 以 对 各 种 应 用 场景 开展 测 
试 ， 甚 至 QUnit 所 提供 的 异步 方法 还 能 帮助 开发 人 员 测 试 Ajax 环 境 下 JavaScript 程 序 的 运行 状况 。 
在 jQuery Mobile 的 实际 应 用 中 ， 为 了 改善 用 户 体验 ， 大 量 数据 交互 往往 通过 Ajax 实现 。 

除了 JavaScript 的 单元 测试 工具 QUnit 外 ， 其 他 类 似 的 单元 测试 工具 还 有 很 多 ,例如 专门 面 癌 
C/C++ 的 测试 驱动 CppUnit、 专 门面 同 Java 的 测试 驱动 JUnit 以 及 专门 面 辣 .NET 的 测试 驱动 NUnit 
和 MSUnit， 等 等 。 

使 用 QUnit 进 行 JavaScript 单 元 测试 的 效果 如 图 A-1 所 示 。 

在 Hello World 的 这 个 测试 驱动 设计 中 ,包含 了 两 个 基本 的 测试 ， 前 一 个 执行 成 功 ， 后 一 个 执 
行 失败 。 上 默认 情况 下 ， 执 行 成 功 的 用 例会 折合 起 来 ， 而 执行 失败 的 测试 用 例会 被 展开 。 
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QUnit JavaScript 单 元 测试 
QUnit JavaScript 蛙 元 训 试 


Y 


Hide passed tests Check for Globals 


No try-catch 
回 Hide passed tests 回 checkfor Globals 回 No try-catch > . > 
Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; 
sdk Build/MRT) AppleWebKit/534,30 (KHTML, 
fke Gecko) Version/4,0 Mobile Safari/534.30 


Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; 
Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET 


Tests completed in 406 milliseconds 


CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfopPath.3; 1 tests of 2 passed, 1 failed 


MS-RTC LM 8) 


1. 测试 成 功 的 用 例 : QUnit 测试 的 Hello World 
(0, 1, 1) 

Tests completed in 102 milliseconds. 

1 tests of 2 passed, 1 failed. 1. 期 待 结果 是 Hello 


1 测试 成 功 的 用 前 : QUnit 测试 的 Hello World (0, 1, 1) 


1. 期 待 结果 是 World , 这 里 是 Hello。QUnf 
Expected: “World" 
Result ] 
Diff: “world” "Hello" 

Source: at Object,<anonymous 
(http://192.168.1.100/ijq 
sectionli3/ 
QUnitHelloworld.htm}l :21 


1. 期 待 结果 是 World， 这 里 是 Hello。QUnit 会 报表 测试 失 由 。 


Expected: “Yorild" 
Result: "Heiio" 
Diff: "Yorid”" "Hello" 


图 A-1 左 图 为 在 正中 运行 QUnit 的 效果 ， 右 图 为 在 Android 中 运行 QUnit 的 效果 
这 个 Hello World 测 试用 例 的 完整 代码 如 代码 清单 A-1 所 示 。 


代码 清单 A-1 QUnit 的 Hello World 测 试用 例 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" 
type=" text/css" media="screen" /> 
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script> 
<script> 
$(document).ready(function( ){ 
module(" 测 试 成 功 的 用 例 "); 
test("QUnit 测试 的 Hello World",， function() { 
var actual = "Hello"; 


equal( actual， "Hel1o"， "期待 结 采 是 Hello”);) 
}); 


module(" 测 试 失败 的 用 例 "); 
test("QUnit 测试 的 Hello World",， function() { 
var value = "Hello"; 
equal( value,，"World",， "期 待 结 采 是 World， 这 里 是 Hello。QUnit 会 报告 测试 失败 。”);} 
}); 
}); 


</script> 

</head> 

<body> 
<h1 id="qunit-header">QUnit JavaScript 单 元 测试 </h1> 
<h2 id="qunit-banner"></h2> 
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<div id="qunit-testrunner-toolbar" ></div> 
<h2 id="qunit-userAgent"></h2> 
<ol id="qunit-tests"> 
</ol1> 
<div id="qunit-fixture"> 测 试 标 记 </div> 
</body> 
</html> 


开发 基于 QUnit 的 测试 驱动 时 ， 首 先 需 要 引用 相关 的 JavaScript 库 。 由 于 QUnit 是 基于 jQuery 
所 开发 的 ， 所 以 需要 引用 jQuery 库 、QUnit 库 和 CSS 文 件 ， 示 例 代码 如 下 : 

<script src="http://code.jquery.com/jquery-latest.js"></script> 

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script> 

值得 注意 的 是 ， 如 果 测 试用 例 需要 运行 在 移动 设备 中 ( 例如 Android 或 者 iPhone )， 最 好 能 够 
加 入 viewport 的 meta 标 签 ， 否 则 可 能 会 显示 异 笛 : 

<meta name= Viewport ”content= width=device-width，initial-scale=1 > 

这 个 meta 信 息 将 会 控制 呈现 内 容 的 大 小 , 保证 内 容 中 的 文字 按照 正常 比例 显示 ， 这 也 与 惯常 
的 jQuery Mobile 程 序 一 致 。 

在 QUnit 的 HTML 中 定义 有 不 同 的 DOM id， 它 们 的 用 途 各 不 相同 : 

<h1 id="qunit-header">QUnit Java9cript 单 元 测试 C/h1> 

<h2 id="qunit-banner"></h2> 

<div id="qunit-testrunner-toolbar"></div> 

<h2 id= qunit-userAgent ></h2> 

<ol id="qunit-tests"> 


</01> 
<div id="qunit- 位 xture"> 测 试 标记 </div> 


其 基本 含义 如 表 A-1 所 示 。 


表 A-1 QUnit DOM 容 器 id 及 功能 


DOM 容 器 id 功 能 
qunit-header QUnit 名 称 
qunit-banner QUnit 测 试 界面 中 位 于 测试 标题 下 面 的 一 条 比较 罕 的 横幅 。 如 果 QUnit 执 行 成 


功 , 这 个 横幅 是 绿色 的 ， 如 果 失 败 则 为 红色 。 如 果 QUnit 中 包含 大 量 单元 测试 ， 
则 可 以 通过 这 个 横幅 的 颜色 快速 了 解 测 试 驱动 执行 中 是 否 存在 失败 


quint-testrunner-toolbar 测试 驱动 执行 环境 的 工具 栏 。 例 如 ， 当 点 击 Hide passed tests 复 选 框 时 ， 只 有 失 
败 的 单元 测试 结果 被 呈现 出 来 ， 而 执行 成 功 的 单元 测试 被 隐藏 起 来 

qunit-userAgent 用 以 呈现 测试 环境 。 由 于 不 同 六 览 妖 下 JavaScript 可 能 存在 兼容 性 问题 ， 这 个 
属性 将 有 助 于 辨识 不 同 测试 环境 对 于 测试 驱动 执行 状况 的 影响 

qunit-tests 这 是 一 个 无 符号 列表 的 DOM 容 如 ， 视 试 结果 将 会 被 输出 在 这 里 

quit-fixture 济 试 标记 。 当 执行 reset() 函 数 时 ， 将 会 被 重 置 


在 前 面 的 Hello World! 中 ,各 个 测试 用 例 被 包装 在 jQuery 的 ready() 事 件 中 。 当 页 面 和 JavaScript 
加 载 完 成 时 ，ready() 事 件 被 俐 发 ， 包 小 在 ready() 事 件 中 的 测试 程序 被 依次 执行 。 
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在 下 面 这 上段 JavaScript 代 码 中 ,module() 函 数 标记 了 单元 测试 的 模块 ,其 中 每 个 模块 会 有 一 个 
特定 的 名 称 : 
module(" 测 试 成 功 的 用 例 "); 
test("QUnit 测试 的 Hello World",， function() { 
var actual = "Hello"; 


equal( actual， "Hel1o"， "期 待 结果 是 Hello”);) 
}); 


这 个 名 称 将 会 出 现在 测试 结果 中 。test() 函 数 定 义 了 测试 用 例 的 名 称 ， 预 期 执行 断言 的 数量 
与 测试 用 例 。 预 期 执行 断言 的 数量 通常 可 以 省 略 挥 ,equal() 是 QUnit 执 行 的 断言 ,通过 断言 ,QUnit 
比较 执行 结果 与 预期 是 否 一 致 ， 如 果 一 致 则 返回 执行 通过 的 消息 。 如 果 执 行 失败 ， 则 会 输出 预期 
值 ， 实 际 值 以 及 之 间 的 差异 。 一 旦 断言 错误 ， 那 么 QUnit 会 使 用 红色 标记 这 个 错误 的 执行 结 


在 每 个 执行 结束 的 的 后 面 ， 会 有 一 个 括号 包含 有 3 个 数字 ， 如 网 A-2 所 示 。 


1 测试 成 功 的 用 例 : aunit 测试 的 Hello wordo 1 | 


1. 期 待 结 果 是 World， 这 里 是 Hello。QUnit 会 报告 测 和 中 
Expected: “Yorld" 
Result: He 上 
Diff: “Worild" "Hello" 


图 A-2 QUnit 执 行 结 


在 这 3 个 数字 中 ， 第 一 个 数字 为 执行 失败 的 断言 数量 ， 第 二 个 是 执行 成 功 的 断言 数量 ， 第 三 
个 是 在 这 个 测试 用 例 中 所 有 被 执行 的 断言 数量 。 

如 果 test() 函 数 中 声明 了 预期 的 执行 断言 数量 , 那么 这 个 计数 也 将 作为 一 个 断言 在 所 有 单元 
测试 执行 完成 之 后 来 进行 比较 。 如 于 预期 执行 数量 和 实际 执行 的 断言 数量 不 一 致 , 那么 测试 用 例 
也 会 报错 , 这 是 一 个 比较 有 效 的 验证 测试 路 径 和 测试 覆盖 情况 的 方法 。 特 别 是 在 执行 验收 测试 目 
动 化 或 者 回归 测试 目 动 化 的 时 候 ， 这 能 有 效 提升 测试 质量 。 


A.2 QUnit 断言 


使 用 QUnit 从 事 开发 时 ， 经 常会 用 到 的 断言 如 表 A-2 所 示 。 
表 A-2 ”QUnit 断 言及 功能 


断 言 功 能 
ok(state, message) 验证 state 的 布尔 类 型 数值 ， 如 果 state 为 true 则 测试 通过 ， 为 false 则 测试 失败 
equal(actual, expected, message) 比较 actual 和 expected 数 值 是 否 一 人 怪 ， 如 果 相 同 则 测试 通过 ， 不 同 则 测试 失败 


notEqual(actual，expected，message) ”比较 actual 和 expected 数 值 是 否 不 一 致 ， 如 果 不 一 致 则 测试 通过 , 一 致 则 测试 失败 
deepEqual(actual，expected，message) 比较 对 象 或 数组 各 个 内 容 是 否 一 致 ， 如 果 一 致 则 测试 通过 , 不 一 致 则 测试 失败 


notDeepEqual(actual, expected, 比较 对 象 或 数组 各 个 内 容 是 否 不 一 致 ， 如 末 不 一 致 则 测试 通过 ， 一 致 则 测试 
message) 失败 
strictEqual(actual, expected, 比较 actual 和 excepted 数 值 和 类 型 是 否 一 致 ， 如 末 一 致 则 测试 通过 , 不 一 致 则 


message) 测试 失败 
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(组 ) 
断言 功 能 
notStrictEqual(actual, expected, message) ”比较 actual 和 excepted 数 值 和 类 型 是 否 不 一 致 ， 如 果 不 一 致 则 测试 通过 ， 
一 致 则 测试 失败 
raises(block, expected, message) 验证 代码 段 执行 是 否 会 触发 异常 ， 如 果 触 发 异常 ， 则 测试 通过 ， 否 则 测 
试 失败 


A.3 其 他 测试 技术 


如 采 测 试 环境 比较 复杂 ， 除 QUnit 之 外 ， 还 可 能 用 到 其 他 的 一 些 JavaScript 测 试 目 动 化 工具 。 
Selenium 是 一 种 基于 浏览 硕 的 测试 和 目 动 化 工具 。 基 于 Selenium 可 以 方便 地 将 测试 分 发 到 不 同 
的 测试 环境 ,并 根据 测试 脚本 开展 测试 目 动 化 活动 。 这样 的 过 程 能 有 效 加 强 回 归 测 试 与 验收 测试 
目 动 化 ， 有 助 于 改善 测试 效率 。jQuery Mobile 应 用 可 能 在 多 种 不 同 的 移动 设备 和 浏览 硕 中 执行 ， 
通过 部 署 和 使 用 Selenium 将 可 以 有 效 提 升 不 同 测试 环境 下 的 测试 自动 化 ,改善 质量 成 本 结构 , 优 
化 移动 应 用 开发 成 本 结构 ， 改 善 产品 交付 周期 。 
基于 Selenium 可 以 对 如 下 环境 开展 测试 目 动 化 : 
DQ Google Chrome 12.0+; 
DQ Internet Explorer 6.0+; 
DQ Firefox 3.0+; 
DD Androld 2.3+; 
口 iOS 3+ 的 iPhone 环 境 以 及 iOS 3.2+ 的 iPad 环 境 。 
开发 Selenium 测 试 日 动 化 用 例 的 开发 语言 可 以 是 Java、C#、Python、Ruby、PHP 和 Perl 等 。 这 
对 于 很 多 工程 师 而 言 ， 可 以 很 方便 地 上 手 并 开展 测试 活动 。 
Selenium 项 目 位 于 http://seleniumhq.org/， 开 发 者 可 以 从 这 里 下 载 最 新 的 Selenium 安 闭 程 序 。 
Sinon.JS 是 一 种 JavaScript 单 元 测试 工具 集 ， 可 以 与 QUnit 集 成 之 后 进行 单元 测试 。 
Sinon.JS 文 持 的 条 面 浏 览 希 包括 : 
DQ Internet Explorer 6.0+; 
DQ Firefox 2.0+; 
DQ Google Chrome 7.0+; 
DQ Opera 10.10+; 
DQ Apple Safarl 3.2+。 
文 持 的 移动 操作 系统 包括 : 
QD Apple 10S 3.2; 
DQ Androld 2.1+。 
此 外 ， 开 发 者 还 可 以 基于 Sinon.JS 对 Node.JS 0.2.x+ 所 开发 的 服务 器 端 应 用 开展 测试 活动 。 
Sinon.JS 的 作者 是 Test-Driven JavaScript Development 的 作者 ， 拥 有 多 年 测试 目 动 化 经 验 。 
Sinon.JS 项 目 位 于 http://sinonjs.org/， 开 发 者 可 以 从 这 里 下 载 最 新 的 测试 工具 。 
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jQuery Mobile 
开发 担 南 


JavaScript 是 互联 网 前 端的 重要 语言 ， 其 重要 性 也 延伸 到 了 后 端 、 游戏 等 。jQuery Mobile 是 一 个 简 
单 实 用 的 JavaScript 框 架 ， 通 过 它 ， 你 可 以 迅速 在 不 同 的 手机 系统 、 浏 览 器 实现 你 的 网 页 和 Web App。 
jQuery Mobile 身 为 一 个 移动 端 框架 ， 可 以 使 网 站 上 的 表单 和 Ul 更 好 地 支持 触 屏 ， 也 能 通过 Ajax 和 HTML5 
pushState 让 你 的 网 站 更 自然 地 更 新 内 容 。 本 书 是 一 本 迅速 开发 移动 端 网 页 的 指南 。 
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未 来 到 底 是 Web App 的 天 下 ， 还 是 Native App 的 天 下 ? 就 此 乔布斯 曾经 说 过 ， 虽 然 现 阶段 Native 
App 给 了 用 户 更 好 的 体验 ， 但 是 如 果 现 在 的 开发 者 不 能 有 效 地 利用 Web 技 术 ， 那 他 就 落伍 了 。Native 
App 导 致 的 信息 孤岛 和 适 配 困 难 问 题 ， 并 不 符合 互联 网 的 核心 价值 ， 解 决 这 些 问 题 的 钥匙 就 在 HTML5 规 
范 下 的 jQuery Mobile 技 术 。 而 本 书 是 建立 在 大 量 实践 基础 上 的 经 验 总 结 ， 作 者 充分 了 解 初学 者 如 何 一 步 
步 成 为 jQuery Mobile 专 家 的 过 程 。 这 本 书 的 重要 价值 在 于 通过 知识 点 和 案例 的 有 效 结 合 帮助 读者 重复 
这 一 过 程 。 
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使 用 HTML5 可 以 快速 开发 具有 良好 设备 兼容 性 、 质 量 稳定 的 Web 移 动 应 用 ， 这 已 是 不 争 的 事实 。 
jQuery Mobile 是 一 种 基于 HTML5 的 Web 移 动 应 用 用 户 界面 系统 ， 使 用 这 种 技术 将 能 够 进一步 快速 开发 统 
一 用 户 界 面 的 HTML5 移 动 应 用 。 本 书 对 于 常用 的 开发 场景 娓 九 道 来 ， 适 合作 为 常备 参考 资料 。 书 中 的 高 
级 开发 技巧 具有 很 强 的 实用 性 ， 能 帮助 开发 者 快速 解决 很 多 现实 开发 场景 中 的 常见 问题 。 
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